<ng-container> vs <template>

Question

Angular 2文档中提到了

ng-container，但没有解释它是如何工作的以及用例是什么。

在ngPlural和ngSwitch指令中特别提及。

<ng-container>是否与<template>做同样的事情，或者它取决于是否编写了一个指令来使用其中一个？

是

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

和

<template [ngPluralCase]="'=0'">there is nothing</template>

应该是一样的吗？

我们如何选择其中一个？

如何在自定义指令中使用<ng-container>？

Answer 1

编辑：现在是documented

  

<ng-container>救援

     

Angular <ng-container>是一个不会干扰样式或布局的分组元素，因为Angular不会将它放在DOM中。

     

（...）

     

<ng-container>是Angular解析器识别的语法元素。它不是指令，组件，类或接口。它更像是JavaScript if-block中的花括号：

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

     

如果没有这些大括号，当您打算有条件地将所有这些语句作为单个块执行时，JavaScript将只执行第一个语句。 <ng-container>满足Angular模板中的类似需求。

原始答案：

根据this pull request：

  

<ng-container>是一个逻辑容器，可用于对节点进行分组，但不会在DOM树中呈现为节点。

     

<ng-container>呈现为HTML评论。

所以这个角度模板：

<div>
    <ng-container>foo</ng-container>
<div>

会产生这种输出：

<div>
    <!--template bindings={}-->foo
<div>

因此，如果您想要在应用程序中附加一组元素（即使用ng-container）但不希望用其他元素包装它们，那么*ngIf="foo"非常有用

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

然后

将产生：

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

Answer 2

文档（https://angular.io/guide/template-syntax#!#star-template）给出了以下示例。假设我们有这样的模板代码：

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

在呈现之前，它将会消除＆＃34;脱糖＆＃34;。也就是说，星号符号将转录为符号：

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

如果＆＃39; currentHero＆＃39;是真的，这将呈现为

<hero-detail> [...] </hero-detail>

但是如果你想要这样的条件输出怎么办：

<h1>Title</h1><br>
<p>text</p>

..并且您不希望将输出包装在容器中。

您可以直接编写脱糖版本：

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

这样可以正常工作。但是，现在我们需要ngIf来使用方括号[]而不是星号*，这很令人困惑（https://github.com/angular/angular.io/issues/2303）

出于这个原因，创建了一个不同的符号，如下所示：

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

两个版本都会产生相同的结果（只会渲染h1和p标签）。第二个是首选，因为您可以像使用* ngIf一样。

Answer 3

ng-container的Imo用例是简单替换，自定义模板/组件过度使用。在API文档中，他们提到了以下

  

使用ng-container对多个根节点进行分组

我想这就是它的全部内容：分组内容。

请注意ng-container指令不再是指令包含实际内容的模板。

Answer 4

就我而言，它的作用类似于 <div> 或 <span>，但即使是 <span> 也会干扰我的 AngularFlex 样式，但 ng-container 不会。

Answer 5

当你想使用带有* ngIf和* ngFor的表时的一个用例 - 将div放入td / th将使表元素行为错误 - 。我遇到了这个问题，that就是答案。