在Angular使用ng-container元素的操作详解，

在Angular使用ng-container元素的操作详解，

目录

• 简介
• 先决条件
• 使用 ng-container 避免冗余元素
• 使用 ng-container 确保有效的 HTML 标准
• 结论

简介

ng-container 是 Angular 2+ 中可用的一个元素，可以作为结构指令的宿主。

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

先决条件

如果您想跟着本文学习，您需要：

• 熟悉 DOM 的结构。要了解更多，请查看教程系列《理解 DOM》。
• 对 Angular 模板和结构指令有一定的了解可能会有所帮助。

使用 ng-container 避免冗余元素

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

以下结合了 *ngIf 和 *ngFor 结构指令的示例将无法编译通过：

[secondary_label 无效示例]
<div *ngIf="todos" *ngFor="let todo of todos">
  {{ todo.content }}
</div>

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

[secondary_label 无效示例输出]
无法在一个元素上有多个模板绑定。只能使用一个带 * 前缀的属性

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

[secondary_label 有效示例]
<div *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</div>

其中一个缺点是这种方法会在 DOM 中引入冗余的 div 元素：

[secondary_label 有效示例输出]
<div>
  <div>
    待办事项内容 1
  </div>
  <div>
    待办事项内容 2
  </div>
  <div>
    待办事项内容 3
  </div>
</div>

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

以下示例的行为完全相同，但在运行时不会添加任何额外的元素到 DOM 中：

[secondary_label 改进后的有效示例]
<ng-container *ngIf="todos">
  <div *ngFor="let todo of todos">
    {{ todo.content }}
  </div>
</ng-container>

这将产生以下标记：

[secondary_label 改进后的示例输出]
<div>
  待办事项内容 1
</div>
<div>
  待办事项内容 2
</div>
<div>
  待办事项内容 3
</div>

ng-container 在使用 ngIf 在内联内容上时也很有用：

[secondary_label 示例]
<div>
  <span *ngIf="error">糟糕：</span> {{ message }}
</div>

如果 error 为真，这将产生以下标记：

[secondary_label 示例输出]
<div>
  <span>糟糕：</span> 发生了一个错误。
</div>

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

[secondary_label 改进后的示例]
<div>
  <ng-container *ngIf="error">糟糕：</ng-container> {{ message }}
</div>

如果 error 为真，这将产生以下标记：

[secondary_label 改进后的示例输出]
<div>
  糟糕：发生了一个错误。
</div>

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

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

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

以下示例将产生无效的 HTML，因为期望 li 元素是 ul 元素的直接子元素：

[secondary_label 无效示例]
<ul>
  <div *ngFor="let todo of todos">
    <li *ngIf="todo.content !== 'Done'">
      {{ todo.content }}
    </li>
  </div>
</ul>

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

[secondary_label 有效示例]
<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使用ng-container元素的操作详解的文章就介绍到这了,更多相关Angular使用ng-container内容请搜索3672js教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持3672js教程！

您可能感兴趣的文章:

• Angular中ng-template和ng-container的应用小结
• 在 Angular 中使用懒加载路由的方法
• Angular的FormArray和模态框结合使用实例详解
• monaco editor在Angular的使用详解
• Angular中的结构指令模式及使用详解
• Angular中SASS样式的详细使用教程