如何在Angular中使用ng-container元素

介绍

ng-container 是 Angular 2+ 中可用的元素，可以充当结构指令的宿主。

在本文中，您将探索可以使用 ng-container 解决的场景。

先决条件

如果您想继续阅读本文，您将需要：

• 熟悉DOM的结构。 要了解更多信息，请查看教程系列 了解 DOM。
• 熟悉 Angular 模板 和 结构指令 也可能会有所帮助。

使用 ng-container 避免冗余元素

在 Angular 中，您不能在一个元素上使用多个模板绑定。

此示例结合 *ngIf 和 *ngFor 结构指令将无法编译：

Invalid Example<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

尝试编译此代码将导致以下错误：

Invalid Example OutputCan't have multiple template bindings on one element. Use only one attribute prefixed with *

一种解决方法是分离模板绑定并创建一个包装器：

Valid Example<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

一个缺点是这种方法向 DOM 引入了冗余的 div 元素：

Valid Example Output<div>
  <div>
    Todo Content 1
  </div>
  <div>
    Todo Content 2
  </div>
  <div>
    Todo Content 3
  </div>
</div>

这就是 ng-container 元素变得有用的地方。

以下行为完全相同，但在运行时没有向 DOM 添加任何额外元素：

Improved Valid Example<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

这将导致以下标记：

Improved Example Output<div>
  Todo Content 1
</div>
<div>
  Todo Content 2
</div>
<div>
  Todo Content 3
</div>

ng-container 在 ngIf 用于内联内容的情况下也很有用：

Example<div>
  <span *ngIf="error">Oops:</span> {{ message }}
</div>

如果 error 为真，这将导致以下标记：

Example Output<div>
  <span>Oops:</span> An error occurred.
</div>

用 ng-container 替换 span 元素将减少添加到 DOM 中的冗余 span 元素：

Improved Example<div>
  <ng-container *ngIf="error">Oops:</ng-container> {{ message }}
</div>

如果 error 为真，这将导致以下标记：

Improved Example Output<div>
  Oops: An error occurred.
</div>

减少应用程序中的标记量最终会导致更小的 DOM 树，并有助于避免级联样式表选择器的副作用。

使用 ng-container 确保有效的 HTML 标准

ng-container 还可以解决在使用 div 或 span 不是有效 HTML 的情况下无效 HTML 标记的问题。

以下示例将生成无效的 HTML，因为 li 元素应该是 ul 元素的直接子元素：

Invalid Example<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </div>
</ul>

将 div 替换为 ng-container 可解决此问题：

Valid Example<ul>
  <ng-container *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </ng-container>
</ul>

拥有有效的 HTML 将满足更严格的测试和要求，并确保跨浏览器和设备的支持。

结论

在本文中，您探讨了 ng-container 在 Angular 应用程序中解决的问题，例如冗余元素和无效的 HTML 标准。

如果您想了解有关 Angular 的更多信息，请查看 我们的 Angular 主题页面 以获取练习和编程项目。