AngularJSにはトランスクルージョンがあり、Angularは を使用してコンテンツプロジェクションを取得します。
この投稿はAngular2以降を対象としています。
次のようなデコレータを備えたhomeコンポーネントがあるとします。
@Component({ selector: 'home', template: ` <h1>Heroic Title</h1> <p>Something good...</p> ` })
そして、コンポーネントを含めるときに、次のようなことができるようにしたいとします。
<home> <p>Something else</p> </home>
次に、コンポーネントテンプレートで次のように を使用します。
@Component({ selector: 'home', template: ` <h1>Heroic Title</h1> <p>Something good...</p> <ng-content></ng-content> ` })
結果は次のようになります。
<h1>Heroic Title</h1> <p>Something good...</p> <p>Something else</p>
これにより、ラッパーコンポーネント内にコンポーネントを配置することもできます。 たとえば、myNavコンポーネントをhomeコンポーネント内に投影する方法は次のとおりです。
<home> <myNav></myNav> </home>
ng-contentでselectを使用して、何を含めるかを定義することもできます。 この例では、div要素のみが含まれます。
@Component({ selector: 'home', template: ` <h1>Heroic Title</h1> <p>Something good...</p> <ng-content select="div"> </ng-content> ` })
また、 [attr] 構文を使用して、特定の属性を持つ要素のみを選択できます。 次の例では、次のようなものだけです
…
含まれます:
@Component({ selector: 'home', template: ` <h1>Heroic Title</h1> <p>Something good...</p> <ng-content select="[intro]"> </ng-content> ` })