Жизненный цикл компонента Angular
В Angular компоненты имеют свой жизненный цикл (lifecycle) от создания компонента и до его удаления, который разделяется на конкретные фазы. Фреймворк даёт возможность получить доступ к каждой фазе жизненного цикла при помощи методов — хуков (Lifecycle Hooks) и повлиять на компонент в конкретный этап его жизненного цикла.
Каждый такой метод определен в отдельном интерфейсе, например, метод ngOnInit
определен в интерфейсе OnInit
, то-есть для того, чтобы использовать Lifecycle Hooks, первым делом нужно подключить интерфейсы в компонент таким образом:
export class MyComponent implements OnInit {
constructor() { }
ngOnInit() {
// Custom Logic
}
}
Рассмотрим все хуки, которые предоставляет Angular и разберемся, чем каждый из них может быть нам полезен:
№ | Name |
---|---|
1 | ngOnChanges |
2 | ngOnInit |
3 | ngDoCheck |
4 | ngAfterContentInit |
5 | ngAfterContentChecked |
6 | ngAfterViewInit |
7 | ngAfterViewChecked |
8 | ngOnDestroy |
ngOnChanges — вызывается один раз на инициализации компонента перед методом ngOnInit, затем каждый раз при изменении входных параметров. Метод ngOnChanges принимает в качестве входного параметра объект SimpleChanges, с которого можно получить старые и новые свойства:
export class MyComponent implements OnChanges {
@Input userInfo: UserInfo;
ngOnChanges(changes: SimpleChanges) {
const previousValue = changes['userInfo'].previousValue;
const currentValue = changes['userInfo'].currentValue;
...
}
}
ngOnInit — вызывается один раз на протяжении жизненного цикла компонента после первой установки свойств и выполняет инициализацию компонента. Здесь вы можете задать запросы серверу на загрузку контента, установить подписки и многое другое.
export class MyComponent implements OnInit {
public formGroup: FormGroup;
private _userType: UserTypeEnum;
constructor(
private _activatedRoute: ActivatedRoute,
private _myService: MyService
) {
this._userType =
this._activatedRoute.snapshot.paramMap.get('userType');
}
ngOnInit() {
this._myService.getFormFieldsByType(
this._userType
).subscribe((response) => {
this.formGroup = this._createForm(
response.data
);
}, (error) => console.error( error ) );
}
}
Вы можете задаться вопросом, зачем нам ngOnInit
, если у нас есть constructor
, но стоит отметить, что constructor
лучше использовать для маленького количества логики, например для внедрения зависимостей, а логику для инициализации компонента переносить в ngOnInit
. Это связано с некоторыми причинами — во-первых constructor
обрабатывается движком Javascript, а не фреймворком Angular, а во-вторых в constructor
свойства Inputs
еще не доступны, в отличии от ngOnInit
.
ngDoCheck — вызывается при каждой проверке изменений свойств компонента.
export class MyComponent implements DoCheck {
...
private _currentValue;
private _previousValue;
public changeDetected: boolean = false;
...
ngDoCheck() {
if (this._previousValue !== this._currentValue) {
this.changeDetected = true;
}
}
}
AfterContent и AfterView хуки относятся к дочерним компонентам, чьи теги элементов отображаются в шаблоне текущего компонента.
ngAfterContentInit — вызывается один раз после вставки содержимого в представление компонента кода html. Здесь мы имеем доступ к ElementRef в ContentChild после того, как Angular уже спроецировал внешний контент в компонент view.
@Component({
selector: 'my-component',
template: `
<div>
<ng-content></ng-content>
</div>`
})
export class MyComponent implements AfterContentInit {
@ContentChild('content') content: ElementRef;
ngAfterContentInit() {
// Now we have access to 'this.content'!
}
}
ngAfterContentChecked — вызывается при проверке изменений содержимого, которое добавляется в представление компонента после метода ngAfterContentInit() и после каждого последующего вызова метода ngDoCheck().
ngAfterViewInit — вызывается после инициализации представления компонента, а также представлений дочерних компонентов. Вызывается только один раз сразу после первого вызова метода ngAfterContentChecked
.
ngAfterViewChecked — вызывается после проверки на изменения в представлении компонента, а также проверки представлений дочерних компонентов. Вызывается после первого вызова метода ngAfterViewInit
и после каждого последующего вызова ngAfterContentChecked
.
Методы ngAfterViewInit
и ngAfterViewChecked
схожи с ngAfterContentInit
и ngAfterContentChecked
лишь с тем различием, что первые два вызываются после полной инициализации шаблона.
ngOnDestroy — вызывается перед тем, как Angular удалит элемент. В этом методе можно освобождать те используемые ресурсы, которые не удаляются автоматически сборщиком мусора, например, подписку на какие-то события элементов DOM, останавливать таймеры и т.д. чтобы избежать утечек памяти.
export class MyComponent implements OnDestroy {
private _mySubject: Subject = new Subject();
...
ngOnDestroy() {
localStorage.removeItem('storageKey');
this._searchSubject.unsubscribe();
}
}
Источники: angular.io, angular-university.io, bitsrc.io, thoughtram.io, habr.com, www.coldfox.ru, bxnotes.ru, itnext.io, metanit.com