简介
‘ng-tainer`是角2+中可用的一种元素，可以作为结构指令的宿主。
在本文中，您将探索可以使用ng-tainer处理的场景。
前提条件
如果您想继续阅读本文，您将需要：
- 熟悉DOM的结构。要了解更多信息，请查看系列教程了解DOM.
- 熟悉一些角度templates和Structure directives]可能也会有帮助。
使用ng-tainer避免冗余元素
在Angular中，你不能在一个元素上使用多个模板绑定。
组合* ngIf和* ngFor结构指令的示例将不会编译：
1[secondary_label Invalid Example]
2<div *ngIf="todos" *ngFor="let todo of todos">
3 {{ todo.content }}
4</div>
尝试编译此代码将导致以下错误：
1[secondary_label Invalid Example Output]
2Can't have multiple template bindings on one element. Use only one attribute prefixed with *
一种解决方法是分离模板绑定并创建包装器：
1[secondary_label Valid Example]
2<div *ngIf="todos">
3 <div *ngFor="let todo of todos">
4 {{ todo.content }}
5 </div>
6</div>
这种方法的一个缺点是它向DOM引入了一个多余的‘div’元素：
1[secondary_label Valid Example Output]
2<div>
3 <div>
4 Todo Content 1
5 </div>
6 <div>
7 Todo Content 2
8 </div>
9 <div>
10 Todo Content 3
11 </div>
12</div>
这就是ng-tainer元素变得有用的地方。
以下代码的行为完全相同，但在运行时不会向DOM添加任何额外的元素：
1[secondary_label Improved Valid Example]
2<ng-container *ngIf="todos">
3 <div *ngFor="let todo of todos">
4 {{ todo.content }}
5 </div>
6</ng-container>
这将产生以下标记：
1[secondary_label Improved Example Output]
2<div>
3 Todo Content 1
4</div>
5<div>
6 Todo Content 2
7</div>
8<div>
9 Todo Content 3
10</div>
当内联内容使用ngIf时，ng-tainer也很有用：
1[secondary_label Example]
2<div>
3 <span *ngIf="error">Oops:</span> {{ message }}
4</div>
如果error为真，则会产生以下标记：
1[secondary_label Example Output]
2<div>
3 <span>Oops:</span> An error occurred.
4</div>
将span元素替换为ng-tainer将减少添加到DOM中的多余span元素：
1[secondary_label Improved Example]
2<div>
3 <ng-container *ngIf="error">Oops:</ng-container> {{ message }}
4</div>
如果error为真，则会产生以下标记：
1[secondary_label Improved Example Output]
2<div>
3 Oops: An error occurred.
4</div>
减少应用程序中的标记数量最终会导致较小的DOM树，并有助于避免级联样式表选择器的副作用。
使用ng-tainer确保有效的HTML标准
ng-tainer还可以解决使用div或span不是有效的Html时，Html标记无效的问题。
以下示例将生成无效的HTML，因为li元素应该是ul元素的直接子元素：
1[secondary_label Invalid Example]
2<ul>
3 <div *ngFor="let todo of todos">
4 <li *ngIf="todo.content !== 'Done'">
5 {{ todo.content }}
6 </li>
7 </div>
8</ul>
用ng-tainer替换div可以解决这个问题：
1[secondary_label Valid Example]
2<ul>
3 <ng-container *ngFor="let todo of todos">
4 <li *ngIf="todo.content !== 'Done'">
5 {{ todo.content }}
6 </li>
7 </ng-container>
8</ul>
拥有有效的HTML将满足更严格的测试和要求，并确保跨浏览器和设备的支持。
结论
在本文中，您探索了ng-container在Angular应用程序中解决的问题，例如冗余元素和无效的HTML标准。
如果您想了解更多有关ANGLE的信息，请查看我们的ANGLE主题页面以获取练习和编程项目。