快捷導(dǎo)航

詳解Angular組件生命周期(一)

更新時(shí)間：2021年05月24日 09:02:30 作者：starof

每個(gè)Angular版本在其生命周期中都經(jīng)歷了各個(gè)階段。組件在Angular中起著關(guān)鍵作用; 在這里，本文將討論Angular中的組件生命周期以及它們?nèi)绾斡绊懣蚣芩邪姹镜纳芷凇?/div>

概述

組件聲明周期以及angular的變化發(fā)現(xiàn)機(jī)制

紅色方法只執(zhí)行一次。

變更檢測(cè)執(zhí)行的綠色方法和和組件初始化階段執(zhí)行的綠色方法是一個(gè)方法。

總共9個(gè)方法。

每個(gè)鉤子都是@angular/core庫(kù)里定義的接口。

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

@Component({
  selector: 'app-life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.css']
})
export class LifeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

雖然接口不是必須的，Angular檢測(cè)到鉤子方法就會(huì)去執(zhí)行它，還是建議把接口寫(xiě)上。

一、鉤子的調(diào)用順序

import { Component, OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy, Input, SimpleChange, SimpleChanges } from '@angular/core';

let logIndex: number = 1; //計(jì)數(shù)器

@Component({
  selector: 'app-life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.css']
})
export class LifeComponent implements OnInit, OnChanges, DoCheck, AfterContentInit
  , AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {
  @Input()
  name: string;

  logIt(msg: string) {
    console.log(`# ${logIndex++}  ${msg}`);
  }
  constructor() {
    this.logIt("name屬性在constructor里的值是: " + this.name);
  }

  ngOnInit() {
    this.logIt("name屬性在OnInit里的值是: " + this.name);
  }

  ngOnChanges(changes: SimpleChanges): void { // 傳入一個(gè)SimpleChanges對(duì)象
    let name = changes['name'].currentValue;
    this.logIt("name屬性在ngOnChanges里的值是: " + this.name);
  }

  ngDoCheck(): void {
    this.logIt("DoCheck");
  }

  ngAfterContentInit() {
    this.logIt("ngAfterContentInit");
  }

  ngAfterContentChecked() {
    this.logIt("ngAfterContentChecked");
  }

  ngAfterViewInit() {
    this.logIt("ngAfterViewInit");
  }

  ngAfterViewChecked() {
    this.logIt("ngAfterViewChecked");
  }
  ngOnDestroy() {
    this.logIt("ngOnDestory");
  }
}

初始化邏輯依賴(lài)輸入屬性的值時(shí)，初始化邏輯一定要寫(xiě)在ngOnInit里，不能寫(xiě)在constructor里面。

DoCheck在Angular的每個(gè)變更檢測(cè)周期中調(diào)用。

ngAfterContentInit和ngAfterContentChecked跟模版，組件的內(nèi)容投影相關(guān)的。

ngAfterViewInit和ngAfterViewChecked跟組件的模版，初始化視圖相關(guān)的。

二、onChanges鉤子

父組件初始化或修改子組件的輸入?yún)?shù)時(shí)會(huì)被調(diào)用。

需要先理解js中可變對(duì)象和不可變對(duì)象。

//字符串是不可變的
var greeting = "Hello";
greeting = "Hello World";
//對(duì)象是可變的
var user = { name: "Tom" };
user.name = "Jerry";

例子：

child組件有3個(gè)屬性，其中2個(gè)是輸入屬性。

父組件有一個(gè)greeting屬性和一個(gè)name屬性是Tom的user對(duì)象。

父組件要改變輸入屬性，所以greeting和user.name是雙向綁定。

<div class="parent">
    <h2>我是父組件</h2>
    <div>問(wèn)候語(yǔ)：<input type="text" [(ngModel)]="greeting"></div>
    <div>
      姓名：
      <input type="text" [(ngModel)]="user.name">
    </div>
    <app-child [greeting]="greeting"  [(user)]="user"> </app-child>
</div>

父組件改變兩個(gè)input的值，值變化時(shí)候傳入子組件的值也會(huì)變化，傳入子組件的輸入屬性的值變化時(shí)會(huì)觸發(fā)ngOnChanges()。

父組件初始化子組件。初始化的時(shí)候調(diào)一次ngOnChanges(),初始化后子組件的greeting變成Hello,也就是父組件上的greeting的值。

user變成一個(gè)name屬性為T(mén)om的對(duì)象。

改變輸入屬性的值，父組件問(wèn)候語(yǔ)greeting改為Helloa。

Angular的變更檢測(cè)刷新不可變對(duì)象，也就是greeting的值，然后調(diào)用ngOnChanges()方法，greeting的值從之前的hello，變?yōu)榱薍elloa。

修改user.name為T(mén)omb，控制臺(tái)上沒(méi)有打印新的消息。

因?yàn)橛脩?hù)只是改變了可變對(duì)象user的屬性，user對(duì)象的引用自身是沒(méi)有改變的，所以onChanges()方法沒(méi)有被調(diào)用。

雖然可變對(duì)象的屬性改變不會(huì)觸發(fā)ngOnChanges()方法調(diào)用，但是子組件的user對(duì)象的屬性仍然改變了，由于Angular的變更監(jiān)測(cè)機(jī)制仍然捕獲了組件中每個(gè)對(duì)象的屬性變化。

改變子組件的message屬性也不引起子組件的onChanges()方法調(diào)用。因?yàn)閙essage不是輸入屬性。而ngOnChanges()只有在輸入屬性變化時(shí)候被調(diào)用。

三、變更檢測(cè)機(jī)制和DoCheck()鉤子

變更檢測(cè)由zone.js實(shí)現(xiàn)的。保證組件的屬性變化和頁(yè)面的變化同步。瀏覽器中發(fā)生的異步事件(點(diǎn)擊按鈕，輸入數(shù)據(jù)，數(shù)據(jù)從服務(wù)器返回，調(diào)用了setTimeout()方法)都會(huì)觸發(fā)變更檢測(cè)。

變更檢測(cè)運(yùn)行時(shí)，檢測(cè)組件模版上的所有綁定關(guān)系，如果組件屬性被改變，與其綁定的模版相應(yīng)區(qū)域可能需要更新。

注意：變更檢測(cè)機(jī)制只是將組件屬性的改變反應(yīng)到模版上，變更檢測(cè)機(jī)制本身永遠(yuǎn)不會(huì)改變組件屬性的值。

兩種變更檢測(cè)策略。

Default 檢測(cè)到變化，檢查整個(gè)組件樹(shù)。
OnPush 只有當(dāng)輸入屬性變化時(shí)，才去檢測(cè)該組件及其子組件。

Angular應(yīng)用是一個(gè)以主組件為根的組件樹(shù)，每個(gè)組件都會(huì)生成一個(gè)變更檢測(cè)器，任何一個(gè)變更檢測(cè)器檢測(cè)到變化，zone.js就根據(jù)組件的變更檢查策略來(lái)檢測(cè)組件(也就是調(diào)doCheck()鉤子)，來(lái)判斷組件是否需要更新它的模版。

DoCheck檢查是從根組件開(kāi)始往下檢查所有的組件樹(shù)，不管變更發(fā)生在哪個(gè)組件。

例子：

監(jiān)控user.name這種可變對(duì)象的屬性的改變。

在child中加一個(gè)oldUsername來(lái)存變更前的username,加一個(gè)changeDetected屬性標(biāo)志username是否發(fā)生變化，默認(rèn)是false。 noChangeCount計(jì)數(shù)器默認(rèn)是0。

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit, OnChanges, DoCheck {

  @Input()
  greeting: string;

  @Input()
  user: { name: string };

  message: string = "初始化消息";
  oldUsername: string;
  changeDetected: boolean = false;
  noChangeCount: number = 0;

  constructor() { }

  ngOnInit() {
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log(JSON.stringify(changes, null, 2));
  }

  ngDoCheck() {
    if (this.user.name !== this.oldUsername) {
      this.changeDetected = true;
      console.log("DoCheck: user.name 從 " + this.oldUsername + "變?yōu)? + this.user.name);
      this.oldUsername = this.user.name;
    }
    if (this.changeDetected) {//變化來(lái)計(jì)數(shù)器清0
      this.noChangeCount = 0;
    } else {//沒(méi)變化
      this.noChangeCount++;
      console.log("DoCheck:user.name沒(méi)變化時(shí)ngDoCheck方法已經(jīng)被調(diào)用" + this.noChangeCount + "次")
    }
    this.changeDetected = false;//最后不管變沒(méi)變標(biāo)志位復(fù)位
  }

}