Angular 2 NgIf，請勿在條件下渲染容器元素，但會顯示其子元素

Question

如何在角度2中做如下操作？我用僞代碼編寫它來幫助解釋更好。

我試過應用類但我不希望它渲染容器div如果可能的話。

我也試過<模板>標籤，但我可能會錯過一些東西。由於

<!-- ngIf: isPromo --> 
<div class="promoContainer"> 
<!-- ngIf end --> 

<div class="item">...</item> 

<!-- ngIf: isPromo --> 
</div> 
<!-- ngIf end --> 

Answer 1

一個解決辦法是爲你的內部HTML創建組件，並使用ngIf沒有封裝這樣的封裝版本與版本之間切換：

<div class="promoContainer" *ngIf='isPromo'> 
    <promotable-component></promotable-component> 
</div> 

<promotable-component *ngIf='!isPromo'></promotable-component> 

如果你有一個組件定義像這樣：

@Component({ 
    moduleId: module.id, 
    selector: 'promotable-component', 
    template: '<div class="item">...</item>' 
}) 
export class PromotableComponent {} 

Answer 2

爲什麼不試試這個簡單的

<!--if--> 
<div class="promoContainer" *ngIf='isPromo'>  
    <div class="item">...</item> 
</div> 

<!--else--> 
<div class="item" *ngIf='!isPromo'>...</item>