<ng-container>對比<template>

Question

官方文檔中提到了ng-container ，但我仍在嘗試了解它是如何工作的以及用例是什么。

它在ngPlural和ngSwitch指令中特別提到。

<ng-container>與<template> <ng-container>做同樣的事情還是取決於是否編寫了指令來使用其中之一？

是

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

和

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

應該是一樣的？

我們如何選擇其中之一？

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

Answer 1

編輯2：是不是記錄了！

編輯：現在記錄在案

<ng-container>來救援

Angular <ng-container>是一個不會干擾樣式或布局的分組元素，因為 Angular 不會將它放在 DOM 中。

（……）

<ng-container>是 Angular 解析器識別的語法元素。 它不是指令、組件、類或接口。 它更像是 JavaScript if-block 中的花括號：

 if (someCondition) {

      statement1; 
      statement2;
      statement3;
     }

如果沒有這些大括號，JavaScript 只會在您打算將所有語句作為單個塊有條件地執行時才執行第一條語句。 <ng-container>滿足了 Angular 模板中的類似需求。

原答案：

根據這個拉取請求：

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

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 。

Answer 3

ng-container Imo 用例是簡單的替代品，自定義模板/組件對其來說是多余的。 在 API 文檔中，他們提到了以下內容

使用 ng-container 對多個根節點進行分組

我想這就是它的全部內容：將東西分組。

請注意ng-container指令會消失，而不是其指令包裝實際內容的模板。

Answer 4

在我的情況下，它的作用類似於<div>或<span>但是即使<span>也會弄亂我的 AngularFlex 樣式，但ng-container不會。

Answer 5

當您想使用帶有 *ngIf 和 *ngFor 的表格時，它的一個用例 - 因為在 td/th 中放置一個 div會使表格元素行為異常-。 我遇到了這個問題， 這就是答案。