Angular 2 NgIf，不按条件渲染容器元素，但显示其子元素 [英] Angular 2 NgIf, dont render container element on condition but show its child elements

问题描述

您如何在角度2 中执行以下操作?我已经用伪代码编写了它，以帮助更好地解释.

How do you do something like the following in angular 2? I've written it in pseudo code to help explain better.

我尝试了应用类，但我不希望它呈现容器div .

我也尝试过< template> 标记，但我可能遗漏了一些内容.谢谢

I have also tried the < template > tag but I may be missing something. Thanks

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

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

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

推荐答案

一种解决方案是为您的内部HTML创建一个组件，并使用ngIf在封装版本和未封装版本之间进行切换，如下所示:

A solution would be to create a component for your inner HTML and use ngIf to switch between the encapsulated version and the version without encapsulation like this:

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

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

在其中定义了这样的组件的地方:

Where you have a Component defined like this:

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

这篇关于Angular 2 NgIf，不按条件渲染容器元素，但显示其子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！