如何在由 *ngIf 控制的同一模板中包含两个 ng-contents

Question

我有一个 angular 2 组件用于显示 bootstrap 3 按钮组。组件可以有标签，也可以独立。

我的解决方案是使用两个由 *ngIf 控制的 ng-contents，但是，它拒绝显示任何一个 ng-contents 并且不会引发错误。

这是 btn-multi.html:

<div class="form-group"
     *ngIf="label">
    <label class="control-label col-lg-2 col-md-3">
        {{ label }}
    </label>

    <div class="col-lg-10 col-md-9">
        <div class="btn-group">
            <ng-content></ng-content>
        </div>
    </div>
</div>

<div class="btn-group"
     *ngIf="!label">
    <ng-content></ng-content>
</div>

这是它的用法：

<btn-multi label="Some Label"
           [(value)]="someValue">
   <btn [value]="true">Yes</btn>
   <btn [value]="false">No</btn>
</btn-multi>

这是它只使用一个 ng-content:

我目前正在使用 angular 2 beta-15。

谢谢！

Answer 1

NgIf 妨碍了包含内容，因为 ng-content 在 NgIf 被评估后呈现。

你需要采取另一种方法，可能是这样的：

<div [ngClass]="{'form-group': label}">
  <label *ngIf="label" class="control-label col-lg-2 col-md-3">
    {{ label }}
  </label>

  <div [ngClass]="{'col-lg-10 col-md-9': label}">
    <div class="btn-group">
        <ng-content></ng-content>
    </div>
  </div>
</div>

还有更好的方法，这完全取决于您希望如何使用此组件。

仅供参考，只是即时执行此操作，因此未经过测试，只是为了给您一个大概的想法。

如何在由 *ngIf 控制的同一模板中包含两个 ng-contents

How can I have two ng-contents in the same template controlled by *ngIf

twitter-bootstrap

angularjs

twitter-bootstrap-3

angular2-components

angular