< n- 容器 > vs < 模板 >

小开

用于 ng-container的 Imo 用例是简单的替代品，对于它们来说，自定义模板/组件将是多余的。在 API 文档中他们提到了以下内容

使用 n- 容器对多个根节点进行分组

我想这就是它的全部意义: 分组的东西。

请注意，ng-container指令没有包装实际内容的模板。

小开

最佳答案

编辑: 现在是记录在案

<ng-container>前来救援

角度 <ng-container>是一个分组元素，不干涉样式或布局，因为角度没有把它放在 DOM。

(...)

<ng-container>是由 Angular 解析器识别的语法元素。它不是指令、组件、类或接口。它更像是 JavaScript if-block 中的大括号:
  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>

因此，当您希望在应用程序中但是在 不想用其他元素包裹它们中有条件地附加一组元素(即使用 *ngIf="foo")时，ng-container非常有用。

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

会产生:

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

小开

文档(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。

小开

当您希望使用一个包含 * ngIf 和 * ngFor-As 的表时，在 td/th 中放入一个 div 将使用 使表元素行为不当-。我面对这个问题，而那个就是答案。

小开

在我的情况下，它像一个 <div>或 <span>，但即使是 <span>搞砸了我的 AngularFlex 样式，但 ng-container没有。

< n- 容器 > vs < 模板 >

编辑: 现在是 记录在案

<ng-container>前来救援

原答案:

编辑: 现在是记录在案

`<ng-container>`前来救援