एक component Angular UI को आधारभूत निर्माण खण्ड हो — एक TypeScript class जो @Component decorator सहित सजिएको हुन्छ र स्क्रिनको एक खण्ड (यसको "view") नियन्त्रण गर्छ। हरेक Angular अनुप्रयोग components को एक tree हो।
{ } ;
({
: ,
: ,
: [],
})
{
name = ;
() { ; }
}
@Component decorator तीन कुरा लाई जोड्छ: एक selector (तपाइँ यो HTML मा कसरी प्रयोग गर्नुहुन्छ), एक template (markup), र styles (यो component मा सीमित)।
<!-- user-card.html — the template binds to the class -->
<h2>{{ name }}</h2> <!-- interpolate a property -->
<button (click)="greet()">Greet</button> <!-- call a method on click -->
Class को public properties र methods सीधै यसको template मा binding मार्फत पहुँचयोग्य छन् — यो Angular ले data र view लाई कसरी जोड्छ भन्ने कोरको आधार हो।
<!-- in another component's template, use the selector -->
<app-user-card></app-user-card>
/* user-card.css — these styles ONLY affect this component */
h2 { color: blue; } /* won't leak to other components' <h2>s */
Angular component styles लाई स्वचालित रूपमा scopes गर्छ (View Encapsulation), त्यसैले CSS components बीचमा leak हुँदैन।
Components हरेक Angular अनुप्रयोग को संरचना कसरी गर्नुहुन्छ — template + logic + scoped styles को आत्मनिर्भर एकाइहरु, tree मा composed।
@Component decorator (selector, template, styles) लाई बुझ्नु र class को properties/methods ले template सँग कसरी bind हुन्छन् भन्ने कुरा Angular development को पूर्ण आधार हो; अरु सबै कुरा component model मा आधारित छ।
विस्तृत उत्तरसहित IT अन्तर्वार्ता प्रश्नहरूको पुस्तकालय — जुनियरदेखि सिनियरसम्म।
दान गर्नुहोस्