Методы жизненного цикла компонента в Angular
Компоненты в Angular проходят через ряд этапов жизненного цикла — от создания до уничтожения. Angular предоставляет специальные методы (хуки), которые позволяют «встраиваться» в эти этапы и выполнять нужную логику.
Основные хуки жизненного цикла
| Метод (хук) | Когда вызывается |
|---|---|
ngOnChanges() | Когда изменяются входные @Input() свойства |
ngOnInit() | Один раз после инициализации компонента |
ngDoCheck() | На каждом цикле проверки изменений (custom change detection) |
ngAfterContentInit() | После вставки контента в <ng-content> |
ngAfterContentChecked() | После каждой проверки вставленного контента |
ngAfterViewInit() | После инициализации представления (ViewChild) |
ngAfterViewChecked() | После каждой проверки представления компонента |
ngOnDestroy() | Перед удалением компонента из DOM |
Порядок вызова хуков
ngOnChanges (при наличии @Input)
→ ngOnInit
→ ngDoCheck
→ ngAfterContentInit
→ ngAfterContentChecked
→ ngAfterViewInit
→ ngAfterViewChecked
(далее — ngDoCheck → ngAfterContentChecked → ngAfterViewChecked — циклично)
→ ngOnDestroy (при удалении компонента)
Пример использования жизненных хуков
import {
Component,
OnInit,
OnChanges,
OnDestroy,
Input
} from '@angular/core';
@Component({
selector: 'app-example',
template: `<p>Пример жизненного цикла</p>`
})
export class ExampleComponent implements OnInit, OnChanges, OnDestroy {
@Input() data: string = '';
constructor() {
console.log('constructor');
}
ngOnChanges() {
console.log('ngOnChanges: data изменилось');
}
ngOnInit() {
console.log('ngOnInit: компонент инициализирован');
}
ngOnDestroy() {
console.log('ngOnDestroy: компонент удалён');
}
}
Когда использовать?
| Хук | Для чего использовать |
|---|---|
ngOnInit | Инициализация данных, подписки, начальные действия |
ngOnChanges | Реакция на изменение входных свойств (@Input) |
ngOnDestroy | Очистка таймеров, отписка от потоков, WebSocket и т.д. |
ngAfterViewInit | Работа с ViewChild (DOM) после отображения |
ngDoCheck | Кастомная логика при обновлениях (редко используется) |
Совет:
Самыми часто используемыми являются ngOnInit, ngOnDestroy, и ngOnChanges. Остальные нужны для более тонкой настройки и специфических случаев.