உள்ளடக்க ப்রொஜெக்ஷன் ஒரு கூறு தன் பெற்றோர் கூறால் அனுப்பப்பட்ட மார்க்அப்பை ஏற்க மற்றும் வரையறுக்க அனுமதிக்கிறது — <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 கூறுகளை உருவாக்குவதன் சாவி — அட்டைகள், மாடல்கள், செப்பBoxes, தளவமைப்பு, மற்றும் எந்த "குண்ட" இதில் நுகர்வோர் உள் உள்ளடக்கம் வழங்குகிறார்கள்.
இல்லாமல், கூறுகள் கடுமையாக இருக்கும் (உள்ளீடுகளின் மூலம் மட்டுமே கட்டமைக்கக்கூடியது); <ng-content> மூலம் (மற்றும் பல கோப்புறைகளுக்கு select), அவை சுறுசுறுப்பான கொள்கலன்களாக மாறுகிறது, வடிவ அமைப்புகள் மற்றும் பகிரப்பட்ட கூறு நூலகங்களுக்கு அপরிহார்யம்.