Что такое компонент Angular?

Question

Accepted Answer

**Компонент** — это фундаментальный строительный блок пользовательского интерфейса Angular — класс TypeScript, украшенный декоратором `@Component`, который управляет частью экрана (его «представлением»). Каждое приложение Angular — это дерево компонентов. ## Анатомия компонента ```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` объединяет три вещи: **селектор** (как вы его используете в HTML), **шаблон** (разметка) и **стили** (ограниченные этим компонентом). ## Класс содержит логику и данные ```html

``` Открытые свойства и методы класса напрямую доступны в его шаблоне через привязку — это суть того, как Angular связывает данные и представление. ## Использование компонента ```html ``` ## Стили по умолчанию инкапсулированы ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular автоматически изолирует стили компонентов (View Encapsulation), поэтому CSS не просачивается между компонентами. ## Почему это важно Компоненты — это способ структурирования каждого приложения Angular — самостоятельные единицы шаблона + логики + изолированных стилей, объединённые в дерево. Понимание декоратора `@Component` (селектор, шаблон, стили) и того, как свойства/методы класса привязываются к шаблону, — это абсолютная основа разработки на Angular; всё остальное строится на модели компонентов.