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

Question

我有一个用于显示bootstrap 3按钮组的角度2组件。该组件可以有标签，也可以单独使用。

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

在这里＆＃39; 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：

我目前正处于角度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>

还有更好的方法，这取决于你希望如何消费这个组件。

仅供参考，我在飞行中做了这个，所以没有经过测试，只是为了给你一个大致的想法。