Жизненный цикл компонента

После создания компонента фреймворк Angular вызывает у этого компонента ряд методов, которые представляют различные этапы жизненного цикла:

• ngOnChanges: вызывается до методаngOnInit()при начальной установке свойств, которые связаны механизмом привязки, а также при любой их переустановке или изменении их значений. Данный метод в качестве параметра принимает объект классаSimpleChanges, который содержит предыдущие и текущие значения свойства.

• ngOnInit: вызывается один раз после установки свойств компонента, которые участвуют в привязке. Выполняет инициализацию компонента.

• ngDoCheck: вызывается при каждой проверке изменений свойств компонента сразу после методовngOnChangesиngOnInit

• ngAfterContentInit: вызывается один раз после методаngDoCheck()после вставки содержимого в представление компонента кода html

• ngAfterContentChecked: вызывается фреймворком Angular при проверке изменений содержимого, которое добавляется в представление компонента. Вызывается после методаngAfterContentInit()и и после каждого последующего вызова методаngDoCheck().

• ngAfterViewInit: вызывается фреймворком Angular после инициализации представления компонента, а также представлений дочерних компонентов. Вызывается только один раз сразу после первого вызова методаngAfterContentChecked()

• ngAfterViewChecked: вызывается фреймворком Angular после проверки на изменения в представлении компонента, а также проверки представлений дочерних компонентов. Вызывается после первого вызова методаngAfterViewInit()и после каждого последующего вызоваngAfterContentChecked()

• ngOnDestroy: вызывается перед тем, как фреймворк Angular удалит компонент.

Каждый такой метод определен в отдельном интерфейсе, который называется по имени метода без префикса "ng". Например, метод ngOnInit определен в интерфейсе OnInit. Поэтому, если мы хотим отслеживать какие-то этапы жизненного цикла компонента, то класс компонента должен применять соответствующие интерфейсы:

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<p>Hello Angular 2</p>`
})
export class AppComponent implements OnInit, OnDestroy { 
    name:string="Tom";

    constructor(){ this.log(`constructor`); }
    ngOnInit() { this.log(`onInit`); }

    ngOnDestroy() { this.log(`onDestroy`); }

    private log(msg: string) {
        console.log(msg);
    }
}

ngOnInit

МетодngOnInit()применяется для какой-то комплексной инициализации компонента. Здесь можно выполнять загрузку данных с сервера или из других источников данных.

ngOnInit()не аналогичен конструктору. Конструктор также может выполнять некоторую инициализацию объекта, в то же время что-то сложное в конструкторе делать не рекомендуется. Конструктор должен быть по возможности простым и выполнять самую базовую инициализацию. Что-то более сложное, например, загрузку данных с сервера, которая может занять продолжительное время, лучше делать в методеngOnInit.

ngOnDestroy

МетодngOnDestroy()вызывается перед удалением компонента. И в этом методе можно освобождать те используемые ресурсы, которые не удаляются автоматически сборщиком мусора. Здесь также можно удалять подписку на какие-то события элементов DOM, останавливать таймеры и т.д.

ngOnChanges

МетодngOnChanges()вызывается перед методомngOnInit()и при изменении свойств в привязке. С помощью параметраSimpleChangesв методе можно получить текущее и предыдущее значение измененного свойства.