Czym jest content projection z ng-content?

Question

IT Interview Practice · Accepted Answer

**Content projection** pozwala komponentowi zaakceptować i renderować **markup przesłany przez komponent nadrzędny** — umieszczony za pomocą ``. To sposób na budowanie elastycznych, wielokrotnie używanych komponentów-opakowań (karty, dialogi, układy), których wewnętrzną zawartość kontroluje konsument. (To Angular'owy odpowiednik slots w Vue/web-componentach i `children` w React'cie.) ## Projekcja pojedynczego slotu ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Karta dostarcza stylizowane opakowanie; komponent nadrzędny decyduje, co się w nim znajduje — znacznie bardziej elastyczne niż przesyłanie ciągów znaków via `@Input`. ## Projekcja wieloślotowa z select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Atrybut `select` (selektor CSS — atrybut, klasa lub tag) kieruje każdy fragment projektowanej zawartości do właściwego slotu ``, umożliwiając układy wieloregionowe. ## Projektowana zawartość zachowuje swój oryginalny kontekst ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Dlaczego to ważne Content projection jest kluczem do budowania **wielokrotnie używalnych, komponowalnych** komponentów UI w Angular'u — kart, modali, zakładek, układów oraz każdego "shell'a", w którym konsument dostarcza wewnętrzną zawartość. Bez tego komponenty byłyby sztywne (konfigurowane tylko poprzez inputs); z `` (i `select` dla wielu slotów) stają się elastycznymi kontenerami, co jest niezbędne dla systemów projektowania i bibliotek komponentów wspólnych.

Projekcja pojedynczego slotu

Projekcja wieloślotowa z select

Projektowana zawartość zachowuje swój oryginalny kontekst

Dlaczego to ważne

Powiązane pytania