ng2 - ng-containerタグとng-templateタグの違い

Question

<ng-container>と<ng-template>要素の違いを説明できますか？

NgContainerのドキュメントが見つかりませんでした。テンプレートタグの違いをよく理解していません。

それぞれのコード例が大きく役立つだろう。

Answer 1

それらの両方が一緒に（例えばdiv又はspanような）ページに表示される他の要素を導入することなく、グループの要素に使用されるモーメント（2.xの、4.xの）です。

templateただし、厄介な構文が必要です。例えば、

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li> 

は、それはあなたが期待するとおそらくすでに精通している素敵な*構文に従うので、あなたが代わりにng-containerを使用することができます

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn"> 
    <li>...</li> 
</template> 

なります。

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn"> 
    <li>...</li> 
</ng-container> 

詳しくは、this discussion on GitHubを参照してください。

---

<template>

4.xのに推奨されておらず、<ng-template>に変更されることに留意されたいです。

---

使用

• <ng-container>あなたが*ngIfまたは*ngForまたはあなたは、このような構造的なディレクティブの内側に複数の要素をラップする場合のように、ネストされた構造のディレクティブのためのヘルパー要素が必要な場合は、
• <ng-template>ngForTemplate、ngTemplateOutlet、またはcreateEmbeddedView()を使用してさまざまな場所でスタンプするビュー "スニペット"が必要な場合は、

Answer 2

私は、カスタムリストの列のコンポーネントで、内部に2個のタグ

と<mat-option>を使用私は<ng-template>何でそれをラップ

に表示されます。しかし、私は<ng-container>でそれを包むときに表示されます。

Answer 3

ng-if、ng-for、ng-switchなどの構造ディレクティブにng-templateが使用されています。構造指示なしで使用すると、何も起こらずレンダリングされます。

適切なラッパーまたは親コンテナがない場合は、ng-containerが使用されます。ほとんどの場合、divまたはspanをコンテナとして使用していますが、複数の構造ディレクティブを使用する場合は、要素に複数の構造ディレクティブを使用できません。その場合、ng-containerを使用できますDそれは `@Input（）` sの値を渡すための通常の構文です：コンテナ