angular生命周期

原文

　　https://www.jianshu.com/p/a2f1d54097f8

大綱

　　1、angular生命周期是什么
　　2、生命周期鈎子分類
　　3、Angular 2 指令生命周期鈎子的作用及調用順序
　　4、Angular 2 指令生命周期鈎子詳解
　　5、實例代碼
　　6、參考網址

angular生命周期是什么

　　1、Angular每個組件都存在一個生命周期，從創建，變更到銷毀。Angular提供組件生命周期鈎子，把這些關鍵時刻暴露出來，賦予在這些關鍵結點和組件進行交互的能力，掌握生命周期，可以讓我們更好的開發Angular應用
　　2、每個接口都有唯一的一個鈎子方法，它們的名字是由接口名再加上ng前綴構成的，比如OnInit接口的鈎子方法叫做ngOnInit.
　　3、沒有指令或者組件會實現所有這些接口，並且有些鈎子只對組件有意義。只有在指令/組件中定義過的那些鈎子方法才會被Angular調用。

生命周期鈎子分類

　　基於指令與組件的區別來分類:
　　　　1、指令與組件共有的鈎子：
　　　　　　　　ngOnChanges
　　　　　　　　ngOnInit
　　　　　　　　ngDoCheck
　　　　　　　　ngOnDestroy
　　　　2、組件特有的鈎子
　　　　　　　　ngAfterContentInit
　　　　　　　　ngAfterContentChecked
　　　　　　　　ngAfterViewInit
　　　　　　　　ngAfterViewChecked

 Angular 2 指令生命周期鈎子的作用及調用順序

　　1、ngOnChanges - 當數據綁定輸入屬性的值發生變化時調用
　　2、ngOnInit - 在第一次 ngOnChanges 后調用
　　3、ngDoCheck - 自定義的方法，用於檢測和處理值的改變
　　4、ngAfterContentInit - 在組件內容初始化之后調用
　　5、ngAfterContentChecked - 組件每次檢查內容時調用
　　6、ngAfterViewInit - 組件相應的視圖初始化之后調用
　　7、ngAfterViewChecked - 組件每次檢查視圖時調用
　　8、ngOnDestroy - 指令銷毀前調用

 Angular 2 指令生命周期鈎子詳解

　　1、構造函數

　　constructor是ES6中class中新增的屬性，當class類實例化的時候調用constructor，來初始化類。Angular中的組件就是基於class類實現的，在Angular中，constructor用於注入依賴。
　　組件的構造函數會在所有的生命周期鈎子之前被調用，它主要用於依賴注入或執行簡單的數據初始化操作。

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Welcome to Angular World</h1>
    <p>Hello {{name}}</p>
  `,
})
export class AppComponent {
  name: string = '';

  constructor(public elementRef: ElementRef) {//使用構造注入的方式注入依賴對象
    // 執行初始化操作
    this.name = 'Semlinker'; 
  }
}

　　2、ngOnInit

 　　在第一次 ngOnChanges 執行之后調用，並且只被調用一次。它主要用於執行組件的其它初始化操作或獲取組件輸入的屬性值。
在Angular第一次顯示數據綁定和設置指令/組件的輸入屬性之后，初始化指令/組件。
　　使用ngOnInit()有兩個原因：
　　　　a：在構造函數之后馬上執行復雜的初始化邏輯
　　　　b：在Angular設置完輸入屬性之后，對該組件進行准備。

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

@Component({
    selector: 'exe-child',
    template: `
     <p>父組件的名稱：{{pname}} </p>
    `
})
export class ChildComponent implements OnInit {
    @Input()
    pname: string; // 父組件的名稱

    constructor() {
        console.log('ChildComponent constructor', this.pname); 
        // Output：undefined
    }

    ngOnInit() {
        console.log('ChildComponent ngOnInit', this.pname); 
        // output: 輸入的pname值
    }
}

　　3、ngOnChanges

 　　當數據綁定輸入屬性的值發生變化的時候，Angular 將會主動調用 ngOnChanges 方法。它會獲得一個 SimpleChanges 對象，包含綁定屬性的新值和舊值，它主要用於監測組件輸入屬性的變化。當Angular（重新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的SimpleChanges對象。
當被綁定的輸入屬性的值發生變化時調用，首次調用一定會發生在ngOnInit()之前。

 

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h4>Welcome to Angular World</h4>
    <exe-child name="exe-child-component"></exe-child>
  `,
})
export class AppComponent { }
/*
    child.component.ts
*/
import { Component, Input, SimpleChanges, OnChanges } from '@angular/core';

@Component({
    selector: 'exe-child',
    template: `
      <p>Child Component</p>  
      <p>{{ name }}</p>
    `
})
export class ChildComponent implements OnChanges{
    @Input()
    name: string;

    ngOnChanges(changes: SimpleChanges) {
        console.dir(changes);
    }
}

　　4、ngOnDestory

　　在指令被銷毀前，將會調用 ngOnDestory 方法。它主要用於執行一些清理操作，比如：移除事件監聽、清除定時器、退訂 Observable 等。
　　當Angular每次銷毀指令/組件之前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。
　　在Angular銷毀指令/組件之前調用。
　　一些清理邏輯必須在Angular銷毀指令之前運行，把它們放在ngOnDestroy()中。這是在該組件消失之前，可用來通知應用程序中其它部分的最后一個時間點。這里是用來釋放那些不會被垃圾收集器自動回收的各類資源的地方。 取消那些對可觀察對象和DOM事件的訂閱。停止定時器。注銷該指令曾注冊到全局服務或應用級服務中的各種回調函數。 如果不這么做，就會有導致內存泄露的風險。

@Directive({
    selector: '[destroyDirective]'
})
export class OnDestroyDirective implements OnDestroy {
  sayHello: number;
  
  constructor() {
    this.sayHiya = window.setInterval(() => console.log('hello'), 1000);
  }
  
  ngOnDestroy() {
     window.clearInterval(this.sayHiya);
  }
}

　　5、ngDoCheck

　　當組件的輸入屬性發生變化時，將會觸發 ngDoCheck 方法。我們可以使用該方法，自定義我們的檢測邏輯。它也可以用來加速我們變化檢測的速度。
檢測，並在發生Angular無法或不願意自己檢測的變化時作出反應。
在每個Angular變更檢測周期中調用，ngOnChanges()和ngOnInit()之后。

 　　6、ngAfterContentInit

　　在組件使用 ng-content 指令的情況下，Angular 會在將外部內容放到視圖后用。它主要用於獲取通過 @ContentChild 或 @ContentChildren 屬性裝飾器查詢的內容視圖元素。
當把內容投影進組件之后調用。第一次ngDoCheck()之后調用，只調用一次。

 　　7、ngAfterContentChecked

 　　在組件使用 ng-content 指令的情況下，Angular 會在檢測到外部內容的綁定或者每次變化的時候調用。
每次完成被投影組件內容的變更檢測之后調用。ngAfterContentInit()和每次ngDoCheck()之后調用

 　　8、ngAfterViewInit

　　在組件相應的視圖初始化之后調用，它主要用於獲取通過 @ViewChild 或 @ViewChildren 屬性裝飾器查詢的視圖元素。
初始化完組件視圖及其子視圖之后調用。第一次ngAfterContentChecked()之后調用，只調用一次。

　　9、ngAfterViewChecked

　　組件每次檢查視圖時調用
　　每次做完組件視圖和子視圖的變更檢測之后調用。
　　ngAfterViewInit()和每次ngAfterContentChecked()之后調用。

 　　10、AfterContent鈎子和AfterView鈎子的區別

 　　AfterContent鈎子和AfterView相似。關鍵的不同點是子組件的類型不同。
　　　　1、AfterView鈎子所關心的是ViewChildren，這些子組件的元素標簽會出現在該組件的模板里面。
　　　　2、AfterContent鈎子所關心的是ContentChildren，這些子組件被Angular投影進該組件中。

 實例代碼

　　angular代碼實例中的angular-life-cycle

參考網址

　　angular官網