Изучение компонентов Angular

Компоненты — строительные блоки приложений Angular. В этом уроке Вы узнаете о компонентах и их жизненном цикле.

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

Компонент — это часть пользовательского интерфейса, которая включает код HTML, CSS и TypeScript. Он представляет отдельную часть пользовательского интерфейса приложения.

Создание компонента

Используйте Angular CLI, чтобы легко создать компонент:

ng generate component my-component

ng generate component my-component

Структура компонента

Компонент Angular обычно состоит из четырёх основных файлов:

• .html: шаблон
• .ts: логика
• .css: стили
• .spec.ts: тестирование

Декоратор компонента

Декоратор @Component связывает класс компонента с его шаблоном и стилями.

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

Хуки жизненного цикла

Компоненты Angular имеют хуки жизненного цикла, которые позволяют выполнять код на определённых этапах. К распространённым хукам относятся ngOnInit() и ngOnDestroy().

Использование ngOnInit()

ngOnInit() выполняется после инициализации данных компонента Angular. Этот хук отлично подходит для начальной настройки:

ngOnInit() {
  console.log('Component initialized!');
}

Отображение компонентов

Используйте селектор компонента в других шаблонах, чтобы отобразить его:

<app-my-component></app-my-component>

Итоги

Вы узнали о компонентах, создании компонентов и их хуках жизненного цикла. Отличная работа!