Angular 2 NgIf,不按条件渲染容器元素,但显示其子元素
如何在angular 2中执行以下操作?我用伪代码编写了它,以帮助更好地解释 我已经尝试了应用类,但是如果可能的话,我不希望它渲染容器div 我还尝试了标记,但可能遗漏了一些内容。谢谢Angular 2 NgIf,不按条件渲染容器元素,但显示其子元素,angular,Angular,如何在angular 2中执行以下操作?我用伪代码编写了它,以帮助更好地解释 我已经尝试了应用类,但是如果可能的话,我不希望它渲染容器div 我还尝试了标记,但可能遗漏了一些内容。谢谢 <!-- ngIf: isPromo --> <div class="promoContainer"> <!-- ngIf end --> <div class="item">...</item> <!-- ngIf: isPromo --&g
<!-- ngIf: isPromo -->
<div class="promoContainer">
<!-- ngIf end -->
<div class="item">...</item>
<!-- ngIf: isPromo -->
</div>
<!-- ngIf end -->
...
解决方案是为内部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 {}
其中定义了一个组件,如下所示:
<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 {}
@组件({
moduleId:module.id,
选择器:“可升级组件”,
模板:“…”
})
导出类可升级组件{}
为什么不简单地尝试一下呢
<!--if-->
<div class="promoContainer" *ngIf='isPromo'>
<div class="item">...</item>
</div>
<!--else-->
<div class="item" *ngIf='!isPromo'>...</item>
...
...
这会导致内容重复