什麼是生命週期
- Angular 創建和渲染組件及其子組件，當它們綁定的屬性發生變化時檢查它們，並在從 DOM 中移除它之前銷燬它們。生命週期函數通俗的講就是組件創建、組件更新、組件銷燬的時候會觸發的一系列的方法。
- 當 Angular 使用構造函數新建一個組件或指令後，就會按下面的順序在特定時刻調用這些 生命週期鉤子方法。
- 每個接口都有唯一的一個鉤子方法，它們的名字是由接口名再加上ng前綴構成的，比如OnInit接口的鉤子方法叫做ngOnInit.
生命週期鉤子分類
-
指令與組件共有的鉤子
- ngOnChanges
- ngOnInit
- ngDoCheck
- ngOnDestroy
-
組件特有的鉤子
- ngAfterContentInit
- ngAfterContentChecked
- ngAfterViewInit
- ngAfterViewChecked
生命週期鉤子的作用及調用順序
| 順序 | 鉤子 | 用途及時機 |
|---|---|---|
| 1 | ngOnChanges() |
當 Angular（重新）設置數據綁定輸入屬性時響應。 該方法接受當前和上一屬性值的 SimpleChanges 對象在 ngOnInit() 之前以及所綁定的一個或多個輸入屬性的值發生變化時都會調用。 |
| 2 | ngOnInit() |
在 Angular 第一次顯示數據綁定和設置指令/組件的輸入屬性之後，初始化指令/組件。在第一輪 ngOnChanges() 完成之後調用，只調用一次。 |
| 3 | ngDoCheck() |
檢測，並在發生 Angular 無法或不願意自己檢測的變化時作出反應。在每個變更檢測週期中，緊跟在 ngOnChanges() 和 ngOnInit() 後面調用。 |
| 4 | ngAfterContentInit() |
當 Angular 把外部內容投影進組件/指令的視圖之後調用。第一次 ngDoCheck() 之後調用，只調用一次。 |
| 5 | ngAfterContentChecked() |
每當 Angular 完成被投影組件內容的變更檢測之後調用。ngAfterContentInit() 和每次 ngDoCheck() 之後調用 |
| 6 | ngAfterViewInit() |
當 Angular 初始化完組件視圖及其子視圖之後調用。第一次 ngAfterContentChecked() 之後調用，只調用一次。 |
| 7 | ngAfterViewChecked() |
每當 Angular 做完組件視圖和子視圖的變更檢測之後調用。ngAfterViewInit() 和每次 ngAfterContentChecked() 之後調用。 |
| 8 | ngOnDestroy() |
指令銷燬前調用：每當 Angular 每次銷燬指令/組件之前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。在 Angular 銷燬指令/組件之前調用。 |
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
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 {
//dom操作放在這個裏面
console.log('06 ngAfterViewInit執行了----初始化完組件視圖及其子視圖之後調用');
}
ngAfterViewChecked() {
console.log('07ngAfterViewChecked執行了----每次做完組件視圖和子視圖的變更檢測之後調用');
}
ngOnDestroy() {
console.log('08ngOnDestroy執行了----');
}
}
生命週期鉤子詳解
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() 完成之後調用，只調用一次。
可以請求數據
-
使用 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值 } }
ngDoCheck()
- 檢測，並在發生 Angular 無法或不願意自己檢測的變 化時作出反應。在每個 Angular 變更檢測週期中調用， ngOnChanges() 和 ngOnInit()之後。
ngAfterContentInit()
- 當把內容投影進組件之後調用。第一次 ngDoCheck() 之後調用，只調用一次
ngAfterContentChecked()
- 每次完成被投影組件內容的變更檢測之後調用。 ngAfterContentInit() 和每次 ngDoCheck() 之後調
ngAfterViewInit()
- 初始化完組件視圖及其子視圖之後調用。第一 次 ngAfterContentChecked() 之後調用，只調用一次。
在這裏可以操作DOM
ngAfterViewChecked()
- 每次做完組件視圖和子視圖的變更檢測之後調用。 ngAfterViewInit()和每次 ngAfterContentChecked() 之後 調用。
ngOnDestroy()
- 當 Angular 每次銷燬指令/組件之前調用並清掃。
在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。在 Angular 銷燬指令/組件之前調用。比如：移除事件監聽、清除定時器
