Hva er innholdsprojeksjon med ng-content?

Question

Accepted Answer

**Innholdsprojeksjon** lar en komponent godta og gjengi **markering som blir sendt inn av dens overordnede** — plassert via ``. Det er hvordan du bygger fleksible, gjenbrukbare wrapperkomponenter (kort, dialoger, oppsett) hvis indre innhold forbrukeren kontrollerer. (Det er Angulars ekvivalent til Vue/web-component slots og React sitt `children`.) ## Enkelt-slot-projeksjon ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Kortet gir den stilte wrapperen; den overordnede bestemmer hva som skal være inne — langt mer fleksibelt enn å sende strenger via `@Input`. ## Multi-slot-projeksjon med select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` `select`-attributten (en CSS-velger — attributt, klasse eller tag) ruter hver del av det projiserte innholdet til riktig ``-slot, og muliggjør flerregionoppsett. ## Projisert innhold beholder sin opprinnelige kontekst ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## Hvorfor det betyr noe Innholdsprojeksjon er nøkkelen til å bygge **gjenbrukbare, sammensetningsbare** UI-komponenter i Angular — kort, modaler, faner, oppsett, og enhver "shell" hvor forbrukeren leverer det indre innholdet. Uten det ville komponentene vært stive (bare konfigurerbar via inputs); med `` (og `select` for flere slots) blir de fleksible beholdere, som er essensielt for designsystemer og delte komponentbiblioteker.