1. ホーム
  2. angular

[解決済み] ng2 - ng-containerタグとng-templateタグの違い

2022-08-28 05:42:46

質問

を使用することの違いを説明してください。 <ng-container><ng-template> という要素があるのでしょうか?

のドキュメントを見つけることができませんでした。 NgContainer のドキュメントが見つからず、テンプレートタグとの違いがよくわかりません。

それぞれのコード例があれば、非常に助かります。

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

どちらも、現時点 (2.x, 4.x) では、ページ上でレンダリングされる別の要素を導入することなく要素をグループ化するために使用されています (たとえば div または span ).

template といった具合に、厄介な構文が必要です。例えば

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

は次のようになる。

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

を使うことができます。 ng-container に従うので、代わりに * の構文に従うからです。

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

詳細は GitHub のこのディスカッション .


なお、4.x では <template> は非推奨で、次のように変更されます。 <ng-template> .


使用する

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