Ukamataji wa maudhui huruhusu sehemu kukariri na kuonyesha alama iliyopeleweka na sehemu ya mzazi — iliyowekwa kupitia <ng-content>. Ndio jinsi unavyojengea sehemu inayobandia iliyorudia inayotumika (kadi, sambamba, muundo) ambapo mteja anayatumia anadhibiti maudhui ya ndani. (Ni kile Ungular kinachofanana na Vue/web-component slots na React 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>
Kadi inatoa mfukoni wenye mitindo; sehemu ya mzazi anaamua kile kinachoingia ndani — zaidi ya kuezesha kuliko kutuma kamba kupitia @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>
Sifa ya select (kichagua CSS — sifa, darasa, au tabu) inaelekeza kila maudhui yaliyokamatwa kwa slot sahihi ya <ng-content>, ikiweza muundo wenye kanda nyingi.
Projected content is created in the PARENT's context — its bindings, methods,
and lifecycle belong to the parent, not the wrapper component.
Ukamataji wa maudhui ndio funguo kwa kujenga sehemu inayorudia, inayojumuika katika Angular — kadi, nafaka, kichupo, miundo, na "ganda" lolote ambapo mteja anatoa maudhui ya ndani.
Bili yake, sehemu zingezingekuwa ngumu (tu inayochorwa kupitia ingizo); na <ng-content> (na select kwa sehemu nyingi), inakuwa chombo cheupe, ambayo ni muhimu kwa mifumo ya muundo na maktaba ya sehemu inayoshirikiwa.