Анатомия компонента

У каждого компонента должны быть:

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

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

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

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

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

Компоненты опционально могут включать список CSS-стилей, применяемых к DOM этого компонента:

@Component({
  selector: 'profile-photo',
  template: `<img src="profile-photo.jpg" alt="Your profile photo" />`,
  styles: `
    img {
      border-radius: 50%;
    }
  `,
})
export class ProfilePhoto {}

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

Альтернативно можно писать шаблон и стили в отдельных файлах:

@Component({
  selector: 'profile-photo',
  templateUrl: 'profile-photo.html',
  styleUrl: 'profile-photo.css',
})
export class ProfilePhoto {}

Это помогает разделить заботы presentation и behavior в проекте. Можно выбрать один подход для всего проекта или решать для каждого компонента отдельно.

И templateUrl, и styleUrl относительны к директории, в которой находится компонент.

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

Imports в декораторе @Component

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

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 — standalone, то есть их можно напрямую добавлять в массив imports других компонентов. Компоненты, созданные в более ранней версии Angular, могут вместо этого указывать standalone: false в декораторе @Component. Для таких компонентов импортируйте NgModule, в котором определён компонент. Подробности — в полном руководстве по NgModule.

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

Каждый компонент определяет CSS selector:

@Component({
  selector: 'profile-photo',
  ...
})
export class ProfilePhoto { }

Подробнее о типах selectors, которые поддерживает Angular, и рекомендации по выбору — в Component Selectors.

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

@Component({
  selector: 'profile-photo',
})
export class ProfilePhoto {}

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

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

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

Компонуя компоненты таким образом, можно думать о Angular-приложении как о дереве компонентов.

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