कंटेंट प्रोजेक्शन एक घटक को अपने माता-पिता द्वारा पारित मार्कअप को स्वीकार और प्रस्तुत करने दे — <ng-content> के माध्यम से रखा गया। यह कैसे आप लचीले, पुनर्प्रयोज्य रैपर घटक (कार्ड, डायलॉग, लेआउट) बनाते हैं जिसके आंतरिक सामग्री उपभोक्ता नियंत्रित करता है। (यह Vue/वेब-घटक स्लॉट्स और React के children के Angular के बराबर है।)
// 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 के माध्यम से स्ट्रिंग पास करने की तुलना में कहीं अधिक लचीला।
@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), वे लचीले कंटेनर बनते हैं, जो डिज़ाइन सिस्टम और साझा घटक लाइब्रेरी के लिए आवश्यक है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें