angular-ng-container

What’s ng-container?

来看一下官方定义：
ng-container is a special element that can hold structural directives like *ngIf, *ngFor, etc. without adding an extra element to the DOM.

翻译过来就是：ng-container 是一个特殊的元素，可以包含结构性指令，比如 *ngIf, *ngFor 等等，而不会在 DOM 中添加额外的元素。

从名字来看，ng-container 是一个容器，而且是一个隐形的容器，渲染后ng-container本身不会在DOM中生成任何元素。

比如下面的代码：

<ng-container *ngIf="true">
  <div>Content</div>
</ng-container>

渲染后的结果是：

<div>Content</div>

需要注意的是，上面仅仅是一个例子，现实中没人会如此这般写代码，我们一般都这么写。

<div *ngIf="true">Content</div>

Use Cases

1. 使用 ng-container 来包裹多个元素，而不需要额外的 div 或者 span 等元素。

<!-- This way will generate an extra div element -->
<div *ngIf="true">
  <div>Content 1</div>
  <div>Content 2</div>
</div>

<!-- This way will not generate any extra div element -->
<ng-container *ngIf="true">
  <div>Content 1</div>
  <div>Content 2</div>
</ng-container>

2. 使用 ng-container来分隔多个结构化指令。

在Angular中，一个元素只能有一个结构性指令，比如 *ngIf, *ngFor 等等。如果需要在一个元素上使用多个结构性指令，可以使用 ng-container 来分隔。
比如下面的代码我们在li元素上同时使用了ngFor和ngIf，这会导致编译错误：Only one structural directive can be applied

<ul>
  <li *ngFor="let item of items" *ngIf="item.isValid"> {{ item.name }}
  </li>
</ul>

可以使用 ng-container 来分隔这两个指令。

<ul>
  <ng-container *ngFor="let item of items">
    <li *ngIf="item.isValid"> {{ item.name }} />
  </ng-container>
</ul>

注意下面的代码虽然也能工作，但是会生成多个ul元素（每个ul元素包含一个li元素），这可能不是我们想要的结果。

<ul *ngFor="let item of items">
  <li *ngIf="item.isValid"> {{ item.name }}
  </li>
</ul>

3. 配合 ng-template 来实现 else 逻辑。

注意：#elseBlock 是一个模板引用变量，只能在ng-template中使用。在ng-container中使用#elseBlock是不会生效的。

<ng-container *ngIf="true; else elseBlock">
  <div>Content 2</div>
</ng-container>
<ng-template #elseBlock>
  <div>Content 3</div>
</ng-template>

4. 配合 ngTemplateOutlet 来实现动态模板。

详情看这里

References:

1. https://angular.dev/api/core/ng-container
2. ng-template: https://zdd.github.io/2024/07/09/angular-ng-template/