Co je projekce obsahu s ng-content?

Question

Accepted Answer

**Projekce obsahu** umožňuje komponentě akceptovat a vykreslit **značky předané z nadřazené komponenty** — umístěné přes ``. Je to způsob, jak vytvářet flexibilní, znovu použitelné komponenty obálky (karty, dialogová okna, rozložení), jejichž vnitřní obsah kontroluje uživatel. (Je to Angular ekvivalent slotů Vue/web-component a React `children`.) ## Projekce jednoho slotu ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Komponenta Card poskytuje stylizovanou obálku; nadřazená komponenta rozhoduje, co se umístí dovnitř — mnohem flexibilnější než předávání řetězců přes `@Input`. ## Projekce více slotů se select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Atribut `select` (CSS selektor — atribut, třída nebo značka) směruje každou část projektovaného obsahu do správného slotu ``, což umožňuje rozložení s více regiony. ## Projektovaný obsah si zachovává svůj původní kontext ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Proč je to důležité Projekce obsahu je klíč k vytváření **znovupoužitelných, skládatelných** UI komponent v Angular — karty, modální okna, karty, rozložení a jakékoli "prostředí", kde poskytovatel dodává vnitřní obsah. Bez ní by komponenty byly rigidní (konfigurovatelné pouze prostřednictvím inputs); s `` (a `select` pro více slotů) se stávají flexibilními kontejnery, což je nezbytné pro designové systémy a sdílené knihovny komponent.