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

Компоненты

📅 30.09.2026

Основной строительный блок приложений Angular.

Компоненты — главные строительные блоки приложений Angular. Каждый компонент — это часть большой веб-страницы. Разбиение приложения на компоненты задаёт структуру проекта: код разделён на части, которые проще сопровождать и наращивать.

Определение компонента

У каждого компонента несколько главных частей:

  1. Декоратор @Component с конфигурацией, которой пользуется Angular.
  2. HTML-шаблон, который определяет, что попадёт в DOM.
  3. CSS-селектор, который задаёт, как компонент используют в HTML.
  4. Класс TypeScript с поведением: обработка ввода пользователя, запросы к серверу и тому подобное.

Ниже упрощённый пример компонента UserProfile.

user-profile.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@Component({
  selector: 'user-profile',
  template: `
    <h1>User profile</h1>
    <p>This is the user profile page</p>
  `,
})
export class UserProfile {
  /* Your component code goes here */
}

Декоратор @Component по желанию принимает свойство styles — CSS, который нужно применить к шаблону:

user-profile.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@Component({
  selector: 'user-profile',
  template: `
    <h1>User profile</h1>
    <p>This is the user profile page</p>
  `,
  styles: `
    h1 {
      font-size: 3em;
    }
  `,
})
export class UserProfile {
  /* Your component code goes here */
}

HTML и CSS в отдельных файлах

HTML и CSS компонента можно вынести в отдельные файлы через templateUrl и styleUrl:

user-profile.ts

1
2
3
4
5
6
7
8
@Component({
  selector: 'user-profile',
  templateUrl: 'user-profile.html',
  styleUrl: 'user-profile.css',
})
export class UserProfile {
  // Component behavior is defined in here
}

user-profile.html

1
2
<h1>User profile</h1>
<p>This is the user profile page</p>

user-profile.css

1
2
3
h1 {
  font-size: 3em;
}

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

Приложение собирают из нескольких компонентов. Страницу профиля, например, можно разложить так:

1
2
3
4
5
6
flowchart TD
    A[UserProfile]-->B
    A-->C
    B[UserBiography]-->D
    C[ProfilePhoto]
    D[UserAddress]

Здесь компонент UserProfile собирает итоговую страницу из нескольких других компонентов.

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

  1. В файле TypeScript компонента добавить оператор import для нужного компонента.
  2. В декораторе @Component добавить этот компонент в массив imports.
  3. В шаблоне добавить элемент, который совпадает с селектором нужного компонента.

Пример: компонент UserProfile импортирует ProfilePhoto.

user-profile.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import {ProfilePhoto} from 'profile-photo.ts';

@Component({
  selector: 'user-profile',
  imports: [ProfilePhoto],
  template: `
    <h1>User profile</h1>
    <profile-photo />
    <p>This is the user profile page</p>
  `,
})
export class UserProfile {
  // Component behavior is defined in here
}

Подробнее о компонентах Angular — в подробном руководстве по компонентам.

Следующий шаг

С устройством компонентов всё ясно. Дальше — как добавлять динамические данные и управлять ими.

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

Комментарии