我如何在由ngIf

Question

控制的同一个模板中有两个ng内容我有一个用于显示引导程序3按钮组的角度2组件。该组件可以有标签，也可以独立使用。

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

这里的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-内容的工作：

我目前在角2测试版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> 

，也有更好的方式来做到这一点，这一切都取决于你如何想这个组件被消耗。只是为了给你一个大致的想法，只是做了这个动态，所以它没有测试，但只是给你一个大致的想法。