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

，也有更好的方式來做到這一點，這一切都取決於你如何想這個組件被消耗。只是爲了給你一個大致的想法，只是做了這個動態，所以它沒有測試，但只是給你一個大致的想法。