web-dev-qa-db-ja.com

<ng-container>と<template>

ng-containerはAngular 2のドキュメントで言及されていますが、それがどのように機能するのか、そしてユースケースは何なのかの説明はありません。

特に ngPlural および ngSwitch ディレクティブで言及されています。

<ng-container>は<template>と同じことをしますか、それともそれらのうちの1つを使うためにディレクティブが書かれたかどうかによりますか？

あります

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

そして

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

同じはずですか？

どのようにそれらのうちの1つを選ぶのですか？

カスタムディレクティブで<ng-container>をどのように使用できますか？

angulartypescriptangular2-template
127
estus

編集：今それは 文書化 です

<ng-container>が救助に

Angularの<ng-container>は、AngularがDOMに入れないため、スタイルやレイアウトを妨げないグループ化要素です。

（...）

<ng-container>は、Angularパーサーによって認識される構文要素です。ディレクティブ、コンポーネント、クラス、またはインターフェースではありません。 JavaScriptのif-blockの中括弧のようなものです。

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

これらの中括弧がなければ、JavaScriptはそれらすべてを単一のブロックとして条件付きで実行しようとする場合にのみ最初のステートメントを実行します。 <ng-container>は、Angularテンプレートの同様のニーズを満たします。

元の答え：

このpull request に従って：

<ng-container>は、ノードをグループ化するために使用できる論理コンテナですが、DOMツリーではノードとしてレンダリングされません。

<ng-container>はHTMLのコメントとしてレンダリングされます。

だからこの角度テンプレート：

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

このような出力を生成します。

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

そのため、ng-containerは、条件付きで要素のグループを追加する場合（つまり、*ngIf="foo"を使用する場合）は、別のelementでそれらをラップしたくない場合）に便利です。

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

その後生成されます：

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>
214
n00dl3

ドキュメント（ 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を使うことができるので2番目のものが好ましいです。

36
Carlo Roosen

ng-containerのためのImoユースケースは、カスタムテンプレート/コンポーネントがやり過ぎる単純な置き換えです。 APIドキュメントで彼らは以下のことを述べています

ng-containerを使って複数のルートノードをグループ化する

それがすべてだと思います。ものをグループ化することです。

ディレクティブが実際のコンテンツをラップするテンプレートではなく、ng-containerディレクティブが削除されることに注意してください。

0
Matt