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

Question

有人可以说明使用之间的区别吗

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

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

Answer 1

ng模板
＜代码＞

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

Angular 将 *ngIf 属性转换为

<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元素要求所有的直接子元素都是特定的类型。例如，<代码>

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

这会有用的。

更多信息:角度结构方向

Answer 2

ng-模板用于ng-if、ng-for和ng-Swit等结构指令。如果您在没有结构指令的情况下使用它，则不会发生任何事情，它将呈现。

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

Answer 3

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

然而，模板需要讨厌的语法。例如，

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

您可以使用< code>ng-container来代替，因为它遵循您所期望的并且可能已经熟悉的< code>*语法。

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

您可以通过阅读GitHub上的此讨论找到更多详细信息。

请注意，在4.x <代码>中

使用

• <代码>