Question

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

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

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

Answer 1

目前它们都是（2.x，4.x）用于将元素组合在一起，而不必引入另一个将在页面上呈现的元素（例如div或{{1} }）。

然而，

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语法。

您可以阅读this discussion on GitHub。

找到更多详情

请注意，在4.x中<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn"> <li>...</li> </ng-container>已弃用，并已更改为<template>。

使用

<ng-container>如果你需要一个帮助元素来嵌套结构指令，如*ngIf或*ngFor，或者你想在这样的结构指令中包含多个元素;
<ng-template>如果您需要查看＆＃34;代码段＆＃34;您希望使用<ng-template>，ngTemplateOutlet或createEmbeddedView()在各个地方加盖印章。

Answer 2

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

如果没有合适的包装器或父容器，则使用

ng-container。在大多数情况下，我们使用div或span作为容器，但在这种情况下，我们想要使用多个结构指令。但是我们不能在元素上使用多个结构指令，在这种情况下，ng-container可以用作容器

Answer 3

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

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

Answer 4

简单来说，$num_valid = 0; for($i=1; $i <= $countarray; $i++) { // do stuff if (/* value is valid */) { $num_valid++; if ($num_valid == 5) break; } }就像 React 的“高级”组件，它仅有助于呈现其子元素。

ng-container基本上是用于 Angular 的内部实现的，其中ng-template中的任何内容在渲染时都将被完全忽略，并且基本上成为视图源的注释。应该将其与Angular的内部指令（例如ng-template，ngIf等）一起使用。

Answer 5

ng-template显示真实价值。

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

输出：

无条件的ng容器显示也会显示内容。

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

输出：
这是容器。

Answer 6

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容器
如果没有合适的宿主元素，请用作分组元素。
示例：

<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

Answer 7

我喜欢<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所部分掩盖。

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

7 个答案: