Question

如何在 angular 2 中执行以下操作？我用伪代码编写它以帮助解释更好。

我已尝试过应用类，但如果可能，我不希望它呈现容器div 。

我也试过＆lt;模板＆gt; 标签，但我可能遗漏了一些东西。感谢

<!-- 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>

Angular 2 NgIf，不要在条件下渲染容器元素，但要显示其子元素

2 个答案: