[解決済み] <ng-container> と <template> の比較

質問

ng-container が記載されているのは 公式ドキュメント しかし、私はまだそれがどのように動作し、どのような使用例であるかを理解しようとしています。

特に ngPlural と ngSwitch ディレクティブを使用します。

はたして <ng-container> と同じことをします。 <template> それとも、ディレクティブがそのいずれかを使用するように書かれているかどうかに依存するのでしょうか？

です。

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

そして

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

同じだと思う？

どうやって選ぶんだ？

どうすれば <ng-container> をカスタムディレクティブで使用することはできますか？

どのように解決するのですか？

編集 : 現在では 文書化

<ng-container> 救助に

アンギュラ  <ng-container>  はグループ化要素で、AngularがDOMに配置しないため、スタイルやレイアウトに干渉しない。

(...)

は  <ng-container>  は、Angularパーサーが認識する構文要素です。これはディレクティブでもコンポーネントでもクラスでもインターフェイスでもありません。どちらかというと、JavaScriptのifブロックの中括弧のようなものです。

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

この中括弧がないと、JavaScriptは、条件付きですべての文を1つのブロックとして実行しようとした場合、最初の文しか実行しない。そのため  <ng-container>  は、Angularのテンプレートで同様のニーズを満たします。

オリジナルの回答です。

によると このプルリクエスト :

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