Angular предоставляет 8 хуков, которые позволяют подключаться к жизненному циклу компонентов и запускать экшены в определенных точках этого цикла.
В этом кратком руководстве мы поговорим о хуках жизненного цикла (lifecycle hooks) в Angular 2 и более свежих версиях.
Вот список доступных хуков жизненного цикла; здесь они перечислены в том порядке, в котором вызываются:
- ngOnChanges: вызывается каждый раз, когда изменяется свойство ввода, привязанного к данным. В первый раз он вызывается перед обработчиком ngOnInit. Этот хук получает объект SimpleChanges, который содержит предыдущие и текущие значения для свойств ввода с привязкой к данным. Он вызывается часто, поэтому рекомендуем ограничить объем выполняемой им обработки.
- ngOnInit: вызывается один раз при инициализации компонента.
- ngDoCheck: этот хук можно использовать вместо ngOnChanges для отслеживания изменений, которые Angular не обнаруживает. Он вызывается при каждом цикле обнаружения изменений, поэтому для производительности важно свести работу этого хука к минимуму.
- ngAfterContentInit: вызывается после проецирования контента в компоненте.
- ngAfterContentChecked: вызывается после проверки проецируемого контента.
- ngAfterViewInit: вызывается после инициализации представления родительского или дочернего компонента.
- ngAfterViewChecked: вызывается после проверки представления родительского или дочернего компонента.
- ngOnDestroy: вызывается один раз при уничтожении компонента. Этот хук хорошо подходит для очистки и отмены подписки на наблюдаемые объекты.
Хук ngOnInit
Давайте рассмотрим простой пример использования хука ngOnInit. Хук жизненного цикла ngOnInit вы, вероятно, будете использовать чаще всего. Если при создании компонента вам нужно выполнить много операций, рекомендуется делать это в хуке ngOnInit, а не в конструкторе:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
constructor() {}
ngOnInit() {
this.setupData();
this.doStuff();
// ...
}
setupData() {
// ...
}
doStuff() {
// ...
}
}
Обратите внимание: мы импортируем OnInit, но внедряем его с помощью метода ngOnInit. Тот же принцип распространяется и на другие хуки жизненного цикла.
Использование нескольких хуков
Если вам нужно применить сразу несколько хуков жизненного цикла Angular, это несложно сделать:
import { Component, OnInit, OnDestroy } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
constructor() {}
ngOnInit() {
console.log('Component Init');
}
ngOnDestroy() {
console.log('Component Destroy');
}
}
Хук ngOnChanges
Хук ngOnChanges использует объект SimpleChanges. Он немного отличается от остальных. Предположим, у нас есть такой компонент:
<my-todo [title]="title" [content]="content"></my-todo>
Для примера давайте представим, что мы хотим сделать что-то при изменении свойства title:
Дочерний компонент my-todo.component.ts
import { Component, Input, SimpleChanges, OnChanges }
from '@angular/core';
@Component({
// ...
})
export class MyTodoComponent implements OnChanges {
@Input() title: string;
@Input() content: string;
constructor() { }
Читайте также: Доступ к компонентам, директивам и элементам DOM в Angular