కాంపోనెంట్ అనేది Angular UI యొక్క ప్రాథమిక బిల్డింగ్ బ్లాక్ — @Component ద్వారా అలంకరించిన TypeScript క్లాస్ ఇది స్క్రీన్ యొక్క ఒక భాగాన్ని (దాని "దృశ్యం") నియంత్రిస్తుంది. ప్రతిটి Angular యాప్ కాంపోనెంట్ల చెట్టు.
{ } ;
({
: ,
: ,
: [],
})
{
name = ;
() { ; }
}
@Component డెకోరేటర్ మూడు విషయాలను కలిపి ఉంచుతుంది: సెలెక్టర్ (మీరు దానిని HTML లో ఎలా ఉపయోగిస్తారు), టెంప్లేట్ (మార్కప్) మరియు స్టైల్లు (ఈ కాంపోనెంట్కు పరిమితమైనవి).
<!-- 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 -->
క్లాస్ యొక్క ప్రజా ఆస్తులు మరియు పద్ధతులు బైండింగ్ ద్వారా దాని టెంప్లేట్లో నేరుగా অ్యాక్సెస్ చేయవచ్చు — ఇది Angular డేటా మరియు వ్యూను ఎలా కనెక్ట్ చేస్తుందో కూడా.
<!-- 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 కాంపోనెంట్ స్టైల్లను స్వయంచాలకంగా స్కోప్ చేస్తుంది (View Encapsulation), కాబట్టి CSS కాంపోనెంట్ల మధ్య లీక్ కాదు.
కాంపోనెంట్లు ప్రతిটి Angular యాప్ను నిర్మించే విధానం — టెంప్లేట్ + లాజిక్ + స్కోప్ చేయబడిన స్టైల్ల స్వయంపూర్తమైన యూనిట్లు, చెట్టులో కూర్చిన.
@Component డెకోరేటర్ (సెలెక్టర్, టెంప్లేట్, స్టైల్లు) మరియు క్లాస్ యొక్క ఆస్తులు/పద్ధతులు టెంప్లేట్కు ఎలా బైండ్ చేయబడ్డాయో అర్థం చేసుకోవడం Angular డెవలప్మెంట్ యొక్క సంపూర్ణ ভిత్తి; ఇతర ప్రతిదీ కాంపోనెంట్ మోడల్ ఆధారంగా నిర్మించబడింది.