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

Posted 2023-02-23

【中文标题】ng2 - ng-container 和 ng-template 标签之间的区别

【英文标题】：ng2 - Difference between ng-container and ng-template tags

【发布时间】：2017-03-24 14:17:27

【问题描述】：

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

我找不到NgContainer 的文档，也不太了解模板标签之间的区别。

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

【参考方案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() 在各个地方标记。

【讨论】：

“讨厌的语法”可能有点夸张：D 这是将值传递给@Input()s 的正常语法。 * 当然更方便。但你说得对，<ng-container> 之所以被引入是因为语法差异造成了相当大的混乱。

不会在 DOM 中引入新元素。 呢？请在你的回答中澄清。

这个页面帮我弄明白了什么是什么：blog.angular-university.io/….

如何使用 n-container 和 ngFor 来渲染表格的行？我正在尝试这个，但它不起作用。我想有条件地渲染行，这样我就可以在行元素上使用 ngFor。

这太棒了

【参考方案2】：

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

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

【参考方案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

【参考方案4】：

ng-template 显示真值。

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

输出：

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

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

输出： 这是容器。

【参考方案5】：

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

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

【参考方案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 部分遮挡。

【参考方案7】：

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

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