Mikä on Angular-komponentti?

Question

Accepted Answer

**Komponentti** on Angular-käyttöliittymän perusrakennusosa — TypeScript-**luokka**, joka on koristettu `@Component`-dekoraattorilla ja joka ohjaa näytön osaa (sen "näkymää"). Jokainen Angular-sovellus on komponenttien puu. ## Komponentin rakenne ```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 } ``` `@Component`-dekoraattori yhdistää kolme asiaa: **selector** (kuinka käytät sitä HTML-muodossa), **template** (merkinnän) ja **styles** (tähän komponenttiin rajatut). ## Luokka sisältää logiikan ja tiedot ```html

``` Luokan julkiset ominaisuudet ja menetelmät ovat suoraan saatavilla sen template-kaavassa sidonnaisuuden kautta — tämä on ydin siitä, kuinka Angular yhdistää tiedot ja näkymän. ## Komponentin käyttö ```html ``` ## Tyylit ovat oletusarvoisesti kapseloituja ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular rajaa komponenttien tyylit automaattisesti (View Encapsulation), joten CSS ei vuota komponenttien välillä. ## Miksi se on tärkeää Komponentit ovat tapa, jolla rakentaa jokainen Angular-sovellus — itsenäiset yksiköt template + logiikka + rajatut tyylit, koostuva puuhun. `@Component`-dekoraattorin (selector, template, styles) ymmärtäminen ja kuinka luokan ominaisuudet/menetelmät sitoutuvat template-kaavaan, on Angular-kehityksen absoluuttinen perusta; kaikki muu rakentuu komponenttimallille.