ng-contentを使用したAngularでのコンテンツプロジェクション

投稿日: 2022-04-20 2022-10-24
タグ: Angular

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>
  `
})

getdocs

13036