Перейти к содержанию

Устройство компонента

📅 30.09.2026

Этот материал предполагает, что вы уже прочитали руководство по основам. Если Angular для вас в новинку, начните с него.

У каждого компонента есть:

  • Класс TypeScript с поведением: обработка ввода пользователя, запросы данных с сервера.
  • HTML-шаблон, который определяет, что попадёт в DOM.
  • CSS-селектор, который задаёт, как компонент используется в HTML.

Сведения, специфичные для Angular, задаются декоратором @Component над классом TypeScript:

1
2
3
4
5
@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
})
export class ProfilePhoto {}

Как писать шаблоны Angular, включая привязку данных, обработку событий и управление потоком, описано в руководстве по шаблонам.

Объект, который передаётся в декоратор @Component, называется метаданными компонента. Сюда входят selector, template и другие свойства, которые разбираются дальше в этом руководстве.

Компонент может дополнительно задать список CSS-стилей, которые применяются к его DOM:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
  styles: `
    img {
      border-radius: 50%;
    }
  `,
})
export class ProfilePhoto {}

По умолчанию стили компонента затрагивают только элементы из его шаблона. Подробнее о подходе Angular к стилям см. в Стили компонентов.

Шаблон и стили можно вынести в отдельные файлы:

1
2
3
4
5
6
@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto {}

Так проще разделить представление и поведение. Один и тот же подход можно принять для всего проекта или выбирать его для каждого компонента отдельно.

И templateUrl, и styleUrl задаются относительно каталога, в котором лежит компонент.

Использование компонентов

Импорты в декораторе @Component

Чтобы использовать компонент, директиву или пайп, его нужно добавить в массив imports декоратора @Component:

1
2
3
4
5
6
7
8
9
import {ProfilePhoto} from './profile-photo';

@Component({
  // Import the `ProfilePhoto` component in
  // order to use it in this component's template.
  imports: [ProfilePhoto],
  /* ... */
})
export class UserProfile {}

По умолчанию компоненты Angular автономные: их можно напрямую добавлять в массив imports других компонентов. Компоненты, созданные в более ранней версии Angular, могут указывать standalone: false в декораторе @Component. Для таких компонентов импортируется NgModule, в котором компонент объявлен. Подробности в полном руководстве по NgModule.

В версиях Angular до 19.0.0 параметр standalone по умолчанию равен false.

Показ компонента в шаблоне

Каждый компонент задаёт CSS-селектор:

1
2
3
4
5
@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

Какие селекторы поддерживает Angular и как выбрать селектор, описано в Селекторы компонентов.

Компонент показывают, создавая подходящий HTML-элемент в шаблоне других компонентов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@Component({
  selector: 'profile-photo',
})
export class ProfilePhoto {}

@Component({
  imports: [ProfilePhoto],
  template: `<profile-photo />`,
})
export class UserProfile {}

Angular создаёт экземпляр компонента для каждого подходящего HTML-элемента. DOM-элемент, который совпал с селектором компонента, называется его элементом-хостом. Содержимое шаблона отрисовывается внутри элемента-хоста.

DOM, который отрисовал компонент по своему шаблону, называется представлением этого компонента.

Собранное таким образом приложение Angular удобно представлять как дерево компонентов.

1
2
3
4
5
6
7
8
flowchart TD
    A[AccountSettings]-->B
    A-->C
    B[UserProfile]-->D
    B-->E
    C[PaymentInfo]
    D[ProfilePic]
    E[UserBio]

Дерево важно для других понятий Angular, в том числе для инъекции зависимостей и дочерних запросов.

Источник: https://angular.dev/guide/components

Комментарии