javascript - content - title set pubg




<ng-container>與<template> (3)

Angular 2文檔中提到了 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> 如何在自定義指令中使用?


編輯:現在已 documented

<ng-container> 進行救援

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

(......)

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

  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>

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


ng-container Imo用例是簡單的替代品,對於這些替代品,自定義模板/組件可能會過大。 他們在API文檔中提到了以下內容

使用ng容器將多個根節點分組

我想這就是全部內容:將內容分組。

請注意, ng-container 指令不使用模板,而是使用其包裝實際內容的模板。







angular2-template