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>，如果您需要一个视图“sn-p”，您可以使用ngForTemplate、ngTemplateOutlet 或createEmbeddedView() 在各个地方标记。

Answer 2

ng-template 用于结构指令，如ng-if、ng-for 和ng-switch。如果你在没有结构指令的情况下使用它，什么都不会发生，它会呈现。

ng-container 在您没有合适的包装器或父容器时使用。在大多数情况下，我们使用div 或span 作为容器，但在这种情况下，当我们想要使用多个结构指令时。但是我们不能在一个元素上使用多个结构指令，在这种情况下，ng-container 可以用作容器

Answer 3

ng-模板
<ng-template> 是一个用于呈现 HTML 的 Angular 元素。它永远不会直接显示。用于结构指令，例如：ngIf、ngFor、ngSwitch、..
示例：

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angular 将 *ngIf 属性转换为 <ng-template> 元素，包裹在宿主元素周围，如下所示。

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng 容器
当没有合适的宿主元素时用作分组元素。
示例：

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <span *ngFor="let h of heroes">
    <span *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </span>
  </span>
</select>

这行不通。因为某些 HTML 元素要求所有直接子元素都是特定类型。例如，<select> 元素需要子元素。您不能将选项包装在条件或 <span> 中。

试试这个：

<div>
  Pick your favorite hero
  (<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
  <ng-container *ngFor="let h of heroes">
    <ng-container *ngIf="showSad || h.emotion !== 'sad'">
      <option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
    </ng-container>
  </ng-container>
</select>

这会起作用。

更多信息：Angular Structural Directive

Answer 4

ng-template 显示真值。

<ng-template>
    This is template block
</ng-template>

输出：

ng-container show without condition 也显示内容。

<ng-container>
    This is container.
</ng-container>

输出：
这是容器。

Answer 5

ng-template 顾名思义，表示一个模板。它本身不会渲染任何东西。我们可以使用ng-container 提供一个占位符来动态地呈现模板。

ng-template 的另一个用例是我们可以使用它来将多个结构指令嵌套在一起。 你可以在这篇博文中找到很好的例子：angular ng-template/ng-container

Answer 6

我喜欢<ng-container> 作为在 Angular .component.html 文件中尽可能多地将“逻辑”与“标记”分开的一种方式。

（部分）渲染 html 表格行的示例：

        <ng-container *ngFor="let product of products">
          <tr>
            <td></td>
            <td>{{ product.productName }}</td>
            <td>{{ product.productCode }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price }}</td>
            <td>{{ product.starRating }}</td>
          </tr>
        </ng-container>

这样，如果我想从 HTML <table> 更改为其他内容，例如带有 flexbox 样式的 <div>，我不需要“切出”循环逻辑（或冒丢失的风险它完全）从<tr> 内部。它还可以防止循环 (ngFor) 逻辑被普通 html 部分遮挡。

Answer 7

简单来说，ng-container 就像 React 的一个 Higher 组件，它只帮助渲染其子元素。

ng-template 基本上用于 Angular 的内部实现，其中 ng-template 内的任何内容在渲染时都会被完全忽略，它基本上变成了对视图源的注释。这应该与 Angular 的内部指令一起使用，例如 ngIf、ngSwitch 等。