在 Angular 2 中，ng-container 是一个很有用的指令，它可以帮助我们更好地组织和管理组件中的模板代码。本文将深入探讨 ng-container 的用法及其在前端开发中的实际应用。
ng-container 的基本用法
在 Angular 2 中，ng-container 主要用于两种场景：批量插入多个元素和给结构指令添加视图包装器。
批量插入多个元素
ng-container 可以在模板中批量插入多个元素，而不需要创建一个额外的包装器，这在一些场景下非常有用。例如，如果我们想要使用 *ngIf 或者 *ngFor 来显示多个元素，但是这些元素并不需要一个外层的包装器，则可以使用 ng-container，如下所示：
------------- ----------- ---- -- ------- ---- ------- --- ------------------- --------------------- ---------------
这段代码会根据 items 数组的长度动态生成对应数量的 div 和 span 元素，而这些元素不需要一个外层的包装器来承载。
给结构指令添加视图包装器
ng-container 还可以用于给结构指令添加视图包装器。结构指令是 Angular 中的一种特殊指令，它们会根据不同的条件来创建、销毁或者重用 DOM 元素。常见的结构指令有 ngIf、ngFor 和 *ngSwitch 等。
当使用结构指令时，我们有时需要添加一个外层元素来承载这些指令生成的 DOM 元素。例如，在下面的代码中，我们使用 *ngIf 来控制一个 div 是否显示，但是如果我们不想让这个 div 成为其他元素的兄弟节点，就需要添加一个额外的包装器：
---- ---------------- ---- ---------------------- ------
但是，如果我们只是想让这个 div 显示或隐藏，并不需要它成为其他元素的兄弟节点，那么我们可以使用 ng-container 来实现：
------------- ---------------- ----------- ---------------
这段代码会在 div 这个元素外层自动添加一个视图包装器，而这个包装器并不会出现在 HTML 中。
ng-container 的高级用法
除了上面介绍的基本用法之外，ng-container 还有一些高级用法，可以帮助我们更好地组织和管理模板代码。
使用 ng-container 分组多个结构指令
在 Angular 中，我们可以使用多个结构指令来动态生成 DOM 元素，但是当这些结构指令嵌套使用时，就会导致代码的可读性变差。例如：
---- ------------------- -- ------------------------- ---------- ------
这段代码中，我们使用了两个结构指令来生成 DOM 元素，但是由于它们嵌套在一起，使得代码的层级很深，不易阅读。如果有多个条件需要判断，那么代码的嵌套层级会更加深。
为了解决这个问题，我们可以使用 ng-container 来分组多个结构指令，如下所示：
------------- -------------------
------------- -------------------
--------- ----------
---------------
---------------这段代码中，我们使用了两个 ng
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25216