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>

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

请注意,在4.x <template>中不推荐使用并更改为<ng-template>.

使用

• <ng-container>如果你需要一个帮手元素嵌套结构类似的指令*ngIf或者*ngFor或者如果你想超过一个元素包裹这样的结构伪指令中;
• <ng-template>如果你需要一个视图"片段",你想用在不同的地方盖章ngForTemplate,ngTemplateOutlet或createEmbeddedView().

Answer 2

NG-模板
的<ng-template>是渲染HTML的角度元素。它永远不会直接显示。用于结构指令，例如：ngIf、ngFor、ngSwitch、..
示例：

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

Angular 将 *ngIf 属性转换成一个<ng-template>元素，包裹在宿主元素周围，就像这样。

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

ng-container
当没有合适的宿主元素时用作分组元素。
例子：

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

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

尝试这个 ：

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

这将起作用。

更多信息：角度结构指令

Answer 3

ng-template用于结构指令等ng-if,ng-for和ng-switch.如果您在没有结构指令的情况下使用它,则不会发生任何事情,它将呈现

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

Answer 4

ng-template 显示真值。

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

输出：

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

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

输出：
这是容器。