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-contentselectを使用して、何を含めるかを定義することもできます。 この例では、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>
  `
})