ng-content सँग कन्टेन्ट प्रोजेक्शन के हो?

Question

Accepted Answer

**कन्टेन्ट प्रोजेक्शन** ले एउटा कम्पोनेन्टलाई **यसको अभिभावकद्वारा पास गरिएको markup स्वीकार र रेन्डर गर्न** अनुमति दिन्छ — `` मार्फत राखिएको। यो लचकदार, पुनः प्रयोगयोग्य र्यापर कम्पोनेन्टहरू (कार्डहरू, संवादहरू, लेआउटहरू) निर्माण गर्ने तरिका हो जसको भित्रको कन्टेन्ट उपभोक्ताले नियन्त्रण गर्छ। (यो Vue/web-component slots र React को `children` को Angular को समतुल्य हो।) ## एकल-स्लट प्रोजेक्शन ```ts // card.component.ts @Component({ selector: "app-card", template: `

`, }) export class CardComponent {} ``` ```html

Title

Any content I want!

``` कार्डले स्टाइल गरिएको र्यापर प्रदान गर्छ; अभिभावकले फैसला गर्छ कि भित्र के जान्छ — `@Input` मार्फत स्ट्रिङहरू पास गरेको भन्दा धेरै लचकदार। ## select सँग बहु-स्लट प्रोजेक्शन ```ts @Component({ selector: "app-panel", template: `

`, }) export class PanelComponent {} ``` ```html

My Panel

Main body content

``` `select` विशेषता (एक CSS selector — विशेषता, क्लास, वा ट्याग) प्रत्येक प्रोजेक्ट गरिएको कन्टेन्टलाई सही `` स्लटमा मार्ग दिन्छ, बहु-क्षेत्र लेआउटहरू सक्षम गर्दै। ## प्रोजेक्ट गरिएको कन्टेन्टले यसको मूल सन्दर्भ राख्छ ```text Projected content is created in the PARENT's context — its bindings, methods, and lifecycle belong to the parent, not the wrapper component. ``` ## किन यो महत्त्वपूर्ण छ कन्टेन्ट प्रोजेक्शन Angular मा **पुनः प्रयोगयोग्य, रचनायोग्य** UI कम्पोनेन्टहरू निर्माण गर्नको कुञ्जी हो — कार्डहरू, मोडलहरू, ट्यابहरू, लेआउटहरू, र कुनै पनि "खोल" जहाँ उपभोक्ताले भित्रको कन्टेन्ट आपूर्ति गर्छ। यो बिना, कम्पोनेन्टहरू कठोर हुने थिए (केवल inputs मार्फत कन्फिगयोगयोग्य); `` सँग (र बहु स्लटहरूको लागि `select`), तिनीहरू लचकदार कन्टेनरहरू बन्छन्, जो डिजाइन प्रणालीहरू र साझा कम्पोनेन्ट लाइब्रेरीहरूको लागि आवश्यक छ।