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

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

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

每个代码示例将极大地帮助。

目前，这两个参数（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上的讨论找到更多详细信息。

请注意，<template>不建议在4.x中将其更改为<ng-template>。

用

• <ng-container>如果您需要嵌套结构指令的辅助元素像*ngIf或者*ngFor或者如果你想超过一个元素包裹这样的结构伪指令中;
• <ng-template>如果你需要一个视图“段”，你想用在不同的地方盖章ngForTemplate，ngTemplateOutlet或createEmbeddedView()。

ng-template用于类的结构指示ng-if，ng-for和ng-switch。如果在不使用结构指令的情况下使用它，则不会发生任何事情，并且它将呈现。

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

ng-template
，<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-container
在没有合适的宿主元素时用作分组元素。
例：

<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-template显示真实价值。

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

输出：

没有条件的ng-container show也显示内容。

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

输出：
这是容器。

ng-template顾名思义，表示模板。它本身不呈现任何内容。我们可以使用ng-container提供占位符来动态呈现模板。

的另一个用例ng-template是，我们可以使用它将多个结构指令嵌套在一起。您可以在此博客文章中找到出色的示例：angular ng-template / ng-container

简单来说，ng-container就像React的Higher组件，它仅有助于呈现其子元素。

ng-template基本上是Angular的内部实现，其中ng-template渲染时会完全忽略里面的所有内容，并且基本上成为对视图源的注释。这应该与角的内部指示等一起使用ngIf，ngSwitch等等。

我喜欢<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>为其他内容（例如<div>使用flexbox样式的样式），则无需从中“切出”循环逻辑（或冒着完全丢失循环逻辑的风险）<tr>。它还可以防止循环（ngFor）逻辑被普通的html所部分掩盖。