Ng2-n- 容器和 n- 模板标记之间的区别

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

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

每种方法的代码示例都会有很大帮助。

87353 次浏览
小开
最佳答案

目前，它们(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>

你可以通过阅读 在 GitHub 上的讨论找到更多的细节。

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

使用

小开

ng-template用于结构指令，如 ng-if、 ng-for和 ng-switch。如果不使用结构化指令，什么都不会发生，它将呈现。

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

小开

顾名思义，ng-template表示 模板。它本身并不会造成任何影响。我们可以使用 ng-container提供一个占位符来呈现模板 动态的。

ng-template的另一个用例是，我们可以使用它将多个结构指令嵌套在一起。 你可以在这篇博客文章中找到很好的例子: < a href = “ https://blog.angle-university y.io/angle-ng-template-ng-Container-ngtemplate”rel = “ nofollow noReferrer”> angle ng-template/ng-Container

小开

简单地说，ng-container就像是 做出反应的一个较高的组件，它只是帮助呈现它的子元素。

ng-template基本上是 角度的内部实现，其中任何 ng-template内部的东西在渲染时都被完全忽略，它基本上成为一个视图源的注释。这应该是用来与角度的内部指令，如 ngIf，ngSwitch等。

小开

N- 模板显示真实值。

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

产出:

N- 容器无条件显示也显示内容。

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

产出:
这是集装箱。

小开

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

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

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

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

集装箱
当没有合适的主机元素时，将其用作分组元素。
示例: < br > 

<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>

会成功的。

更多信息: 角结构指令

小开

我喜欢将 <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 部分模糊。


提交答案