angularjs - 如何在由 *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>

还有更好的方法来做到这一点，这完全取决于您希望如何使用该组件。

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