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>