当我们在 Angular 中需要显示多个组件，但并不希望他们都放置在同一个 <div> 中时，我们就可以使用 <ng-container> 标签。
ng-container 是什么？
ng-container 标签是一种特殊的 DOM 元素，它在 Angular 模板中可以帮助我们组织视图结构，同时又不会在页面中生成多余的节点。从语法上看，它与 <div> 和 <span> 个似，但我们无法通过浏览器开发工具查看到它的存在。
ng-container 的最大特点就是能够作为一个容器使用，而不会改变 HTML 结构。这一特点使得 ng-container 在模板中具有很大的灵活性，特别是用于显示列表时，可以更方便的控制列表项的样式和绑定。
如何使用 ng-container？
ng-container 的使用非常简单，只需要按要求在模板中嵌套即可。
下面是一个示例：
<ng-container *ngIf="isAuthenticated"> <p>Welcome!</p> <button (click)="logout()">Logout</button> </ng-container>
在这个例子中，我们在 ng-container 中放置了两个元素，一个 <p> 和一个 <button>。同时还使用了一个 *ngIf 指令来控制这个 ng-container 的显示。在应用中，当 isAuthenticated 为 true 时，这个 ng-container 中的内容才会显示出来。
使用场景
条件渲染
在数据渲染时，有时我们需要实现某些组件内容的条件渲染，此时就可以使用 ng-container。
下面是一个使用 ng-container 对条件渲染的示例：
<ng-container *ngIf="isAuthenticated; else loginTemplate"> <p>Welcome!</p> <button (click)="logout()">Logout</button> </ng-container> <ng-template #loginTemplate> <button (click)="login()">Login</button> </ng-template>
在这个例子中，我们通过 *ngIf 指令来控制显示登录和注销操作。当用户已经登录时，显示欢迎消息和注销按钮；否则，显示登录按钮。注意这里还用到了 ng-template 标签，它可以作为另外一种条件渲染的方式，有助于提高代码复用性。
循环渲染
在 Angular 中，通常会使用 *ngFor 指令循环渲染列表。如果我们希望在循环渲染时，控制每个元素的样式、绑定方式等属性，就可以将 *ngFor 指令应用在 ng-container 标签上。
下面是一个使用 ng-container 和 *ngFor 指令的示例：
<ng-container *ngFor="let user of users">
<div [class.active]="user.active">{{ user.name }}</div>
</ng-container>在这个例子中，我们使用 *ngFor 指令循环渲染用户列表，对于每个循环项，使用 ng-container 容器包裹，控制元素结构。这里还用到了属性绑定和样式绑定，以便更好地呈现列表项。
总结
ng-container 是 Angular 模板中的一个非常有用的标签，它可以有效的组织视图结构，在循环渲染、条件渲染等重要场景中应用十分广泛。
在使用 ng-container 时需要注意，它在 DOM 中不会生成任何多余的节点，但可以被 Angular 认识和处理。因此，我们在编写组件模板时，可以多加利用 ng-container 标签进行优化，提高应用的性能和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6650ceefd3423812e4391347