在哪里放置 *ngIf 指令？答案

【问题标题】：Where to place *ngIf directive?在哪里放置 *ngIf 指令？
【发布时间】：2021-01-12 14:34:17
【问题描述】：

有什么区别

<ng-container *ngIf="flag">
       <child-component></child-component>
</ng-container>

或直接

<child-component *ngIf="flag"></child-component>

那最好的做法是什么？

【问题讨论】：

如果 ng-container 中只有一个元素，则不应使用 ng-container。如果您在 ng-container 中有多个元素需要在 flag 为真时隐藏，您应该使用第一个替代方案。
如果您使用单个组件，那么最好不要使用 ng-container 指令，因为您的组件将包含额外的指令。如果您有多个组件要处理，那么为了避免多个相同的情况，您可以使用 ng-directive :)

【解决方案1】：

ng-container 是一个没有被 Angular 加载到 DOM 中的指令。它的功能是将其他指令组合在一起。在ngIf 的情况下，它用于将依赖于同一个标志的不同元素组合在一起。

<ng-container *ngIf="flag">
  <div>1</div>
  <div>2</div>
  ...
</ng-container>

如果您只有一个元素，则无需进行太多分组，您可以将*ngIf 直接放在元素上。

【讨论】：