Hvad er content projection med ng-content?

Question

Accepted Answer

**Content projection** lader en komponent acceptere og gengive **markup, der er overført af dens parent** — placeret via ``. Det er, hvordan du bygger fleksible, genanvendelige wrapper-komponenter (kort, dialoger, layouts), hvis indre indhold forbrugeren kontrollerer. (Det er Angulars ækvivalent til Vue/web-component slots og Reacts `children`.) ## Single-slot projektion ```ts // card.component.ts @Component({ selector: "app-card", template: `

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

Title

Any content I want!

``` Kortet giver den stiliserede wrapper; parent bestemmer, hvad der går indeni — meget mere fleksibelt end at videregive strenge via `@Input`. ## Multi-slot projektion med select ```ts @Component({ selector: "app-panel", template: `

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

My Panel

Main body content

``` Attributtet `select` (en CSS-selektor — attribut, klasse eller tag) dirigerer hver del af det projicerede indhold til det rigtige `` slot, hvilket muliggør multi-region layouts. ## Projiceret indhold bevarer sin oprindelige 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 betyder noget Content projection er nøglen til at bygge **genanvendelige, sammensætningsbare** UI-komponenter i Angular — kort, modals, faner, layouts og ethvert "shell", hvor forbrugeren leverer det indre indhold. Uden det ville komponenter være stive (kun konfigurerbare via inputs); med `` (og `select` til flere slots) bliver de til fleksible containere, hvilket er væsentligt for designsystemer og delte komponentbiblioteker.