Innehållsprojicering låter en komponent acceptera och rendera markup som skickas från en överordnad komponent — placerad via <ng-content>. Det är hur du bygger flexibla, återanvändbara omslutningskomponenter (kort, dialoger, layouter) där konsumenten styr det inre innehållet. (Det är Angulars motsvarighet till Vue/web-component slots och Reacts children.)
// card.component.ts
@Component({
selector: "app-card",
template: `
<div class="card">
<ng-content></ng-content> <!-- parent's content is projected here -->
</div>
`,
})
export class CardComponent {}
<!-- parent: anything between the tags is projected into <ng-content> -->
<app-card>
<h2>Title</h2>
<p>Any content I want!</p>
</app-card>
Kortet tillhandahåller den formaterade omslutningen; överordnad komponent bestämmer vad som går inuti — mycket mer flexibelt än att skicka strängar via @Input.
select@Component({
selector: "app-panel",
template: `
<header><ng-content select="[panel-header]"></ng-content></header>
<main><ng-content></ng-content></main> <!-- default slot -->
<footer><ng-content select="[panel-footer]"></ng-content></footer>
`,
})
export class PanelComponent {}
<app-panel>
<h1 panel-header>My Panel</h1> <!-- goes to the header slot -->
<p>Main body content</p> <!-- goes to the default slot -->
<button panel-footer>OK</button> <!-- goes to the footer slot -->
</app-panel>
Attributet select (en CSS-väljare — attribut, klass eller tagg) dirigerar varje del av det projicerade innehållet till rätt <ng-content>-slot, vilket möjliggör layouter med flera regioner.
Projected content is created in the PARENT's context — its bindings, methods,
and lifecycle belong to the parent, not the wrapper component.
Innehållsprojicering är nyckeln till att bygga återanvändbara, sammanställbara UI-komponenter i Angular — kort, modaler, flikar, layouter och vilken "skal" som helst där konsumenten tillhandahåller det inre innehållet.
Utan det skulle komponenter vara stela (endast konfigurerbara via inmatningar); med <ng-content> (och select för flera slots) blir de flexibla behållare, vilket är väsentligt för designsystem och delade komponentbibliotek.