Kas yra Angular komponentas?

Question

IT Interview Practice · Accepted Answer

**Komponentas** yra pagrindinė Angular UI statymo akmenė — TypeScript **klasė**, papuošta `@Component`, kuri kontroliuoja ekrano dalį (jos "rodinį"). Kiekviena Angular programa yra komponentų medis. ## Komponento anatomija ```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 } ``` Dekoratorius `@Component` suriša tris dalykus: **selektorius** (kaip jį naudoji HTML), **šablonas** (žymėjimas) ir **stiliai** (aprašyti šiam komponentui). ## Klasė turi logiką ir duomenis ```html

``` Klasės viešos savybės ir metodai yra tiesiogiai pasiekiami jos šablone per ryšį — tai yra Angular sujungimo duomenis ir rodinį esmė. ## Komponento naudojimas ```html ``` ## Stiliai yra iš jų izoliuoti pagal numatytuosius parametrus ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular automatiškai aprašo komponentų stilius (View Encapsulation), todėl CSS nesisvaidosi tarp komponentų. ## Kodėl tai svarbu Komponentai yra tai, kaip tu sustruktūrizuoji kiekvieną Angular programą — savarankiškus šablono + logikos + aprašytų stilių vienetus, sudėtus į medį. Supersti dekoratorių `@Component` (selektorius, šablonas, stiliai) ir kaip klasės savybės/metodai susiejami su šablonu — tai absoliutus Angular kūrimo pagrindas; viskas kita yra sukurta remiantis komponentų modeliu.

Komponento anatomija

Klasė turi logiką ir duomenis

Komponento naudojimas

Stiliai yra iš jų izoliuoti pagal numatytuosius parametrus

Kodėl tai svarbu

Susiję klausimai