కంటెంట్ ప్రొజెక్షన్ ఒక కాంపోనెంట్ను దాని పేరెంట్ కాంపోనెంట్ ద్వారా పంపిన మార్కప్ను అంగీకరించడానికి మరియు రెండర్ చేయడానికి అనుమతిస్తుంది — <ng-content> ద్వారా ఉంచబడింది. ఇది నమ్యమైన, పునర్వినియోగయోగ్యమైన రాపర్ కాంపోనెంట్ల (కార్డ్లు, డైలాగ్లు, లేআউట్లు) ను నిర్మించడం ఎలా — ఆంతరిక కంటెంట్ను కనిపెట్టే వారు నియంత్రిస్తారు. (ఇది Vue/web-component స్లాట్ల యొక్క Angular సమానం మరియు 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>
కార్డ్ స్టైల్ చేయిన రాపర్ను అందిస్తుంది; పేరెంట్ కాంపోనెంట్ లోపలికి ఏమి జరుగుతుందో నిర్ణయిస్తుంది — @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>
select విశేషణ (CSS సెలెక్టర్ — విశేషణ, తరగతి, లేదా ట్యాగ్) ప్రతిటి ప్రొజెక్ట్ చేయిన కంటెంట్ భాగాన్ని సరైన <ng-content> స్లాట్కు మార్గనిర్దేశం చేస్తుంది, బహు-ప్రాంత లేআউట్లను ఎనేబల్ చేస్తుంది.
Projected content is created in the PARENT's context — its bindings, methods,
and lifecycle belong to the parent, not the wrapper component.
కంటెంట్ ప్రొజెక్షన్ Angular లో పునర్వినియోగయోగ్యమైన, కూర్చిభర్జన చేయిన UI కాంపోనెంట్లను నిర్మించడానికి కీలకమైనది — కార్డ్లు, మోడల్లు, ట్యాబ్లు, లేआউట్లు, మరియు ఏదైనా "షెల్" ఇక్కడ కనిపెట్టే వారు ఆంతరిక కంటెంట్ సరఆందించారు.
ఇలా లేకుండా, కాంపోనెంట్లు దృఢమైనవిగా ఉంటాయి (ఇన్పుట్ల ద్వారా కాన్ఫిగర్ చేయుటకు); <ng-content> (మరియు బహు-స్లాట్ల కోసం select)తో, అవి సుమారుగా కంటెయినర్ల చేయబడతాయి, ఇది డిజైన్ సిస్టమ్లు మరియు భాగస్వామ్య కాంపోనెంట్ లైబ్రరీల కోసం అవసరమైనది.