angular - ng2 - ng-container 和 ng-template 标签之间的区别

Question

有人可以说明使用 <ng-container> 之间的区别吗？和 <ng-template>元素？

我找不到 NgContainer 的文档并且不太明白模板标签之间的区别。

每一个的代码示例都会有很大帮助。

Answer 1

目前 (2.x, 4.x) 它们都用于将元素组合在一起，而无需引入将在页面上呈现的另一个元素(例如 div 或 span )。

template ，但是，需要讨厌的语法。例如，

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

会变成

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

您可以使用 ng-container相反，因为它遵循漂亮的 *您期望并且可能已经熟悉的语法。

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

您可以通过阅读 this discussion on GitHub 找到更多详细信息.

---

请注意，在 4.x 中 <template>已弃用并更改为 <ng-template> .

---

使用

• <ng-container> 如果您需要嵌套结构指令的辅助元素，例如 *ngIf 或 *ngFor 或者，如果您想在这样的结构指令中包装多个元素；
• <ng-template>如果您需要使用 ngForTemplate 在不同位置标记的 View “片段” , ngTemplateOutlet , 或 createEmbeddedView() .