ng-container 和 ng-template 之间的区别

在 Angular 中，ng-container 与 ng-template 都是常用的结构指令，它们的主要作用是用来展示或隐藏一部分 HTML 内容。但是它们之间又有一些明显的区别。本文将会详细介绍 ng-container 和 ng-template 的区别。

ng-container

ng-container 是一个容器元素，可以用来包裹其他结构指令（如 ngIf 或 ngFor）所产生的 HTML 内容，而不会添加任何多余的节点。它本身不会渲染任何内容。因为 ng-container 不会产生多余的节点，所以有时可以用它代替 div 元素来减少 DOM 元素数量，提高性能。

示例：

<ng-container *ngIf="condition">
  <p>something here</p>
</ng-container>

其中，ng-container 包裹的 <p> 元素将根据 condition 变量进行显示或隐藏。

ng-template

与 ng-container 不同，ng-template 实际上是一个模板，可以用来定义复杂的 HTML 结构，包括嵌套的结构指令以及函数调用等等。它本身也不会渲染任何内容，但是可以作为其他指令（如 ngFor 和 ngIf）的输入，用于动态地生成复杂的 HTML 结构。

示例：

<ng-template #template let-items>
  <div *ngFor="let item of items">
    <p>{{ item }}</p>
  </div>
</ng-template>

<ng-container *ngTemplateOutlet="template; context: { items: [1, 2, 3] }"></ng-container>

其中，ng-template 定义了一个名为 template 的模板，该模板接收一个 items 参数，并使用 ngFor 循环该参数数组生成多个 <div> 元素。然后，ng-container 使用 ngTemplateOutlet 指令把 template 模板插入到 DOM 中，并提供一个 items 参数来渲染模板。

区别总结

尽管 ng-container 和 ng-template 都可以用来隐藏或展示 HTML 内容，它们之间还是有一些区别的，主要包括：

• ng-container 用于包裹其他结构指令所产生的 HTML 内容，不会添加多余的节点，可以当作一个虚拟的容器使用，而 ng-template 则是一个实际的模板，可以定义复杂的 HTML 结构。
• ng-container 只能用于包裹其他指令生成的 HTML 内容，而 ng-template 可以用于任意复杂的 HTML 结构的定义，可以嵌套使用结构指令或函数调用等等。
• ng-container 通常用于样式或布局方面的需求，或者用来减少 DOM 元素数量，提高性能，而 ng-template 则通常用于数据展示或动态生成 HTML 内容方面的需求。

综上所述，ng-container 和 ng-template 之间的区别主要在于它们的设计目的不同，实际应用场景也可以有所差异。开发者在使用它们时需要注意这些细节，才能更好地发挥它们的作用。