一、說明

Angular每個元件都存在一個生命週期，從建立，變更到銷燬。Angular提供元件生命週期鉤子，把這些關鍵時刻暴露出來，賦予在這些關鍵結點和元件進行互動的能力。

二、angular中總共有8個生命週期鉤子函式下面統一介紹

三、檢視呼叫順序

//在app.component.html程式碼
<input type="text" [(ngModel)]="name" />
<app-life [item]="name"></app-life>

//在app.component.ts程式碼
 

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name:any = "";
}

//在life.component.html程式碼
<p>
    我是life元件
</p>
<p>我是從父元件輸入的內容:{{item}}</p>

//在life.component.ts程式碼
import { Component, OnInit,Input,OnChanges,SimpleChanges,DoCheck,AfterContentInit,AfterContentChecked,AfterViewInit,AfterViewChecked,OnDestroy} from '@angular/core';

@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() item:any = "";
  index:number = 0;
  log(arg):void{
      console.log(`#${this.index}我是${arg}內容`);
      this.index ++;
  }
  constructor() {
      this.log("constructor");
  }

  ngOnInit() {
    this.log("ngOnInit");
  }
  ngOnChanges(changes:SimpleChanges){
    this.log("ngOnChanges");
  }
  ngDoCheck(){
    this.log("ngDoCheck");
  }
  ngAfterContentInit(){
    this.log("ngAfterContentInit");
  }
  ngAfterContentChecked(){
    this.log("ngAfterContentChecked");
  }
  ngAfterViewInit(){
    this.log("ngAfterViewInit");
  }
  ngAfterViewChecked(){
    this.log("ngAfterViewChecked");
  }
  ngOnDestroy(){
    this.log("ngOnDestroy");
  }
}

• 1、專案初始化後執行效果如下:
  

• 2、當用戶在輸入框輸入的時候，傳遞資料到子元件中執行效果如下:
  

• 3、當滑鼠離開輸入框的時候谷歌控制檯的效果
  
• 4、angular中變化檢測的鉤子函式有ngOnChanges、ngDocheck、ngAfterContentChecked、ngAfterViewChecked

四、ngOnChanges的介紹

• 1、在父元件初始化
• 2、修改子元件
  在上面兩種情況下會觸發ngOnChanges鉤子函式，把上面的程式碼修改下直接列印輸出值

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

執行輸出結果，會展示一個物件，顯示當前值與上一次的值