angular的生命週期

時間 2019-12-06

標籤 angular 生命週期欄目 AngularJS 简体版

原文原文鏈接

什麼是生命週期

生命週期函數通俗的講就是組件建立、組件更新、組件銷燬的時候會觸發的一系列的方法。
當 Angular 使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些生命週期鉤子方法。
每一個接口都有惟一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構成的，好比OnInit接口的鉤子方法叫作ngOnInit.

生命週期鉤子分類

指令與組件共有的鉤子
- ngOnChanges
- ngOnInit
- ngDoCheck
- ngOnDestroy
組件特有的鉤子
- ngAfterContentInit
- ngAfterContentChecked
- ngAfterViewInit
- ngAfterViewChecked

生命週期鉤子的做用及調用順序

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

首次加載生命週期順序

export class LifecircleComponent {

    constructor() {

        console.log('00構造函數執行了---除了使用簡單的值對局部變量進行初始化以外，什麼都不該該作')
    }

    ngOnChanges() {

        console.log('01ngOnChages執行了---當被綁定的輸入屬性的值發生變化時調用(父子組件傳值的時候會觸發)'); 
    }

    ngOnInit() {
        console.log('02ngOnInit執行了--- 請求數據通常放在這個裏面');
    }
    ngDoCheck() {
        console.log('03ngDoCheck執行了---檢測，並在發生 Angular 沒法或不肯意本身檢測的變化時做出反應');
    }
    ngAfterContentInit() {
        console.log('04ngAfterContentInit執行了---當把內容投影進組件以後調用');
    }
    ngAfterContentChecked() {
        console.log('05ngAfterContentChecked執行了---每次完成被投影組件內容的變動檢測以後調用');
    }
    ngAfterViewInit() : void {
        console.log('06 ngAfterViewInit執行了----初始化完組件視圖及其子視圖以後調用（dom操做放在這個裏面）');
    }
    ngAfterViewChecked() {
        console.log('07ngAfterViewChecked執行了----每次作完組件視圖和子視圖的變動檢測以後調用');
    }

    ngOnDestroy() {
        console.log('08ngOnDestroy執行了····');
    }

    //自定義方法
    changeMsg() {

        this.msg = "數據改變了";
    }
}

生命週期鉤子詳解

constructor-掌握

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

ngOnChanges()

當 Angular(從新)設置數據綁定輸入屬性時響應。該方法接受當前和上一屬性值的 SimpleChanges 對象當被綁定的輸入屬性的值發生變化時調用，首次調用一定會發生在 ngOnInit()以前。

//  父組件中 傳遞title屬性給header子組件 
<app-header [title]="title"></app-header>

此時改變title會觸發ngOnChanges生命週期，而且也會觸發
安全

ngOnInit()

在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。在第一輪 ngOnChanges() 完成以後調用，只調用一次。能夠請求數據app

使用 ngOnInit() 有兩個緣由:

在構造函數以後立刻執行復雜的初始化邏輯
在 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值
      }
  }