angular生命週期

原文

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

大綱

　　一、angular生命週期是什麼
　　二、生命週期鉤子分類
　　三、Angular 2 指令生命週期鉤子的做用及調用順序
　　四、Angular 2 指令生命週期鉤子詳解
　　五、實例代碼
　　六、參考網址

angular生命週期是什麼

　　一、Angular每一個組件都存在一個生命週期，從建立，變動到銷燬。Angular提供組件生命週期鉤子，把這些關鍵時刻暴露出來，賦予在這些關鍵結點和組件進行交互的能力，掌握生命週期，可讓咱們更好的開發Angular應用
　　二、每一個接口都有惟一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構成的，好比OnInit接口的鉤子方法叫作ngOnInit.
　　三、沒有指令或者組件會實現全部這些接口，而且有些鉤子只對組件有意義。只有在指令/組件中定義過的那些鉤子方法纔會被Angular調用。

生命週期鉤子分類

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

 Angular 2 指令生命週期鉤子的做用及調用順序

　　一、ngOnChanges - 當數據綁定輸入屬性的值發生變化時調用
　　二、ngOnInit - 在第一次 ngOnChanges 後調用
　　三、ngDoCheck - 自定義的方法，用於檢測和處理值的改變
　　四、ngAfterContentInit - 在組件內容初始化以後調用
　　五、ngAfterContentChecked - 組件每次檢查內容時調用
　　六、ngAfterViewInit - 組件相應的視圖初始化以後調用
　　七、ngAfterViewChecked - 組件每次檢查視圖時調用
　　八、ngOnDestroy - 指令銷燬前調用

 Angular 2 指令生命週期鉤子詳解

　　一、構造函數

　　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'; 
  }
}

　　二、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值
    }
}

　　三、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);
    }
}

　　四、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);
  }
}

　　五、ngDoCheck

　　當組件的輸入屬性發生變化時，將會觸發 ngDoCheck 方法。咱們可使用該方法，自定義咱們的檢測邏輯。它也能夠用來加速咱們變化檢測的速度。
檢測，並在發生Angular沒法或不肯意本身檢測的變化時做出反應。
在每一個Angular變動檢測週期中調用，ngOnChanges()和ngOnInit()以後。

 　　六、ngAfterContentInit

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

 　　七、ngAfterContentChecked

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

 　　八、ngAfterViewInit

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

　　九、ngAfterViewChecked

　　組件每次檢查視圖時調用
　　每次作完組件視圖和子視圖的變動檢測以後調用。
　　ngAfterViewInit()和每次ngAfterContentChecked()以後調用。

 　　十、AfterContent鉤子和AfterView鉤子的區別

 　　AfterContent鉤子和AfterView類似。關鍵的不一樣點是子組件的類型不一樣。
　　　　一、AfterView鉤子所關心的是ViewChildren，這些子組件的元素標籤會出如今該組件的模板裏面。
　　　　二、AfterContent鉤子所關心的是ContentChildren，這些子組件被Angular投影進該組件中。

 實例代碼

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

參考網址

　　angular官網