ng-contentを使ったコンテンツプロジェクションとは何か？

Question

IT Interview Practice · Accepted Answer

**コンテンツプロジェクション**により、コンポーネントは親から渡された**マークアップを受け入れてレンダリング**でき、``を通じて配置できます。これにより、柔軟で再利用可能なラッパーコンポーネント（カード、ダイアログ、レイアウト）を構築でき、その内部コンテンツはコンシューマーが制御できます。（Angular版のVue/ウェブコンポーネントスロットおよびReactの`children`です。） ## シングルスロットプロジェクション ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` カードはスタイル付きラッパーを提供し、親が内部に何を配置するかを決定します — `@Input`を通じて文字列を渡すよりもはるかに柔軟です。 ## selectを使用したマルチスロットプロジェクション ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` `select`属性（CSSセレクタ — 属性、クラス、またはタグ）は、投影されたコンテンツの各部分を正しい``スロットにルーティングし、マルチリージョンレイアウトを有効にします。 ## プロジェクトされたコンテンツは元の文脈を保持 ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## なぜ重要なのかコンテンツプロジェクションは、Angular内で**再利用可能で組み合わせ可能な** UIコンポーネント（カード、モーダル、タブ、レイアウト、およびコンシューマーが内部コンテンツを提供する任意の「シェル」）を構築するための鍵です。なければ、コンポーネントは硬い（入力でのみ設定可能）でしょう。``（および複数スロット用の`select`）があれば、柔軟なコンテナになり、これはデザインシステムと共有コンポーネントライブラリに不可欠です。

シングルスロットプロジェクション

selectを使用したマルチスロットプロジェクション

プロジェクトされたコンテンツは元の文脈を保持

なぜ重要なのか

関連する質問