<ng-container> vs <template>

Question

ng-container 在Angular 2文档中提到但没有解释它是如何工作的以及用例是什么.

它是在特别提及ngPlural和ngSwitch指令.

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

是

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

和

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

应该是一样的吗？

我们如何选择其中一个？

如何<ng-container>在custom指令中使用？

Answer 1

编辑:现在记录在案

<ng-container> 救援

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

(......)

这  <ng-container> 是Angular解析器识别的语法元素.它不是指令,组件,类或接口.它更像是JavaScript if块中的花括号:

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

如果没有这些大括号,当您打算有条件地将所有这些语句作为单个块执行时,JavaScript将只执行第一个语句.在  <ng-container> 满足同样需要在角模板.

原始答案:

根据这个拉动请求:

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

在呈现之前,它将被"去糖".也就是说,星号表示法将转录为符号:

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

如果'currentHero'是真实的,那么它将被渲染为

<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一样.