Mi az Angular komponens?

Question

Accepted Answer

A **komponens** az Angular UI alapvető építőköve — egy TypeScript **osztály**, amely a `@Component` dekorátorral ellátva vezérli a képernyő egy részét (annak "nézetét"). Minden Angular alkalmazás a komponensek fája. ## A komponens anatómiája ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` A `@Component` dekorátor három dolgot köt össze: a **selectorban** (hogyan használod a HTML-ben), a **sablonban** (a jelölés), és a **stílusokban** (ehhez a komponenshez korlátozva). ## Az osztály tartalmazza a logikát és az adatokat ```html

``` Az osztály nyilvános tulajdonságai és módszerei közvetlenül elérhetőek annak sablonában a kötés révén — ez az a lényeg, ahogy az Angular az adatokat és a nézetet összeköti. ## Komponens használata ```html ``` ## A stílusok alapértelmezésben beágyazottak ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Az Angular automatikusan korlátozza a komponensek stílusait (View Encapsulation), így a CSS nem szivárog ki a komponensek között. ## Miért fontos A komponensek az a módszer, amellyel minden Angular alkalmazást strukturálsz — az önálló sablon + logika + korlátozottan körülhatárolt stílusok egységei, egy fában összeadva. A `@Component` dekorátor (selektor, sablon, stílusok) megértése és annak megértése, hogy az osztály tulajdonságai/módszerei hogyan kötődnek a sablonhoz, az Angular fejlesztés abszolút alapja; minden más a komponensmodellre épül.