一文聊聊Angular中的生命週期

使用angular進行開發時，避免不了需要接觸生命週期，以下這篇文章就來帶大家一起聊聊Angular中的生命週期，希望對大家有幫助！

接觸過 react 和 vue 開發的讀者應該對生命週期這個概念不陌生。我們在使用 angular 開發的過程中，是避免不了的。 【相關教學推薦：《angular教學》】

#元件從開始建立到銷毀的過程中，會經歷過一系列的階段。這就是一個生命週期，這些階段對應著應用程式提供的 lifecycle hooks。

那麼，在 angular 中，這些 hooks 都有哪些呢？了解它們，對你編寫程式應該在哪裡寫，很重要。

angular 中，生命週期執行的順序如下：

- constructor 【常用，不算钩子函数，但是很重要】
- ngOnChanges【常用】
- ngOnInit【常用】
- ngDoCheck
  - ngAfterContentInit
  - ngAfterContentChecked
  - ngAfterViewInit【常用】
  - ngAfterViewChecked
- ngOnDestroy【常用】

為了解說和驗證，我們用angular-cli 產生一個 demo 項目。

constructor

在 es6 中的 class 初始化物件的時候，constructor 會立即被呼叫。

class Person {
  constructor(name) {
    console.log('be called')
    this.name = name;
  }
}

let jimmy = new Person('jimmy'); // be called

angular 的元件本身就是要匯出一個類別。當這個元件被 new 起來的時候，會取得 constructor 中的預設的值。

ngOnChanges

當我們有外部參數改變的時候，我們就會執行ngOnChanges，也就是說元件中有@Input 所綁定的屬性值改變的時候呼叫。

簡單說，父元件綁定子元件中的元素，會觸發這個鉤子函數，可以多次出發。這在下面的 ngOnInit 總是會介紹。

ngOnInit

這個方法呼叫的時候，表示元件已經初始化成功。在第一次 ngOnChanges() 完成之後調用，且只調用一次。

// app.component.ts
export class AppComponent implements OnInit, OnChanges {

  constructor() {
    console.log('1. constructor')
  }

  ngOnChanges() {
    console.log('2. ngOnChanges')
  }

  ngOnInit() {
    console.log('3. ngOnInit')
  }
}

列印的資訊如下：

咦？怎麼沒有列印 ngOnChanges 中的鉤子函數資訊呢？

上面已經說過了，需要觸發條件 @Input 的屬性值改變的時候。讓我們來修改一下：

<!-- app.component.html -->
<div>
  <app-demo></app-demo>
</div>

// app.component.ts
// AppComponent 类中添加属性
public count:number = 0;

<!-- demo.component.html -->
<h3>count: {{ count }}</h3>

// demo.component.ts
export class DemoComponent implements OnInit, OnChanges {

  @Input()
  public count: number;

  constructor() {
    console.log('1. demo constructor')
  }

  ngOnChanges() {
    console.log('2. demo ngOnChanges')
  }

  ngOnInit() {
    console.log('3. demo ngOnInit')
  }

}

當透過@Input 將值傳遞給子元件demo 的時候，就會觸發demo 元件中的ngOnChanges。

當 @Input 傳遞的屬性改變的時候，可以多次觸發 demo 元件中的 ngOnChanges 鉤子函數。

<!-- app.component.html -->
<div>
  <app-demo [count]="count"></app-demo>

  <button (click)="parentDemo()">parent button</button>
</div>

// app.component.ts
parentDemo() {
  this.count++;
}

ngDoCheck

當變化偵測發生的時候，觸發該鉤子函數。

這個鉤子函數，緊接在每次執行變更偵測時候 ngOnChanges 和第一次執行執行變更偵測 ngOnInit 後面呼叫。

// demo.component.ts

ngDoCheck() {
  console.log('4. demo ngDoCheck')
}

這個鉤子函數呼叫得比較頻繁，使用成本比較高，謹慎使用。

一般使用ngOnChanges 來偵測變動，而不是ngDoCheck

#ngAfterContentInit

##當把外部的內容投影到內部元件，第一次呼叫

ngDoCheck 之後呼叫ngAfterContentInit，而且只呼叫一次。

// demo.component.ts

ngAfterContentInit() {
  console.log('5. demo ngAfterContentInit');
}

ngAfterContentChecked

#ngAfterContentChecked 鉤子函數在每次ngDoCheck 後呼叫.

// demo.component.ts

ngAfterContentChecked() {
  console.log('5. demo ngAfterContentChecked');
}

ngAfterViewInit

視圖初始化完成呼叫此鉤子函數。在第一次

ngAfterContentChecked 之後調用，只調用一次。

這個時候，取得頁面的

DOM 節點比較合理

// demo.compoent.ts

ngAfterViewInit() {
  console.log('7. demo ngAfterViewInit');
}

ngAfterViewChecked

視圖偵測完成呼叫。在

ngAfterViewinit 後調用，和在每次 ngAfterContentChecked 之後調用，也就是在每次 ngDoCheck 之後調用。

// demo.component.ts

ngAfterViewChecked() {
  console.log('8. ngAfterViewChecked')
}

ngOnDestroy

组件被销毁时候进行的操作。

在这个钩子函数中，我们可以取消订阅，取消定时操作等等。

<!-- app.component.html -->
<app-demo [count]="count" *ngIf="showDemoComponent"></app-demo>

<button (click)="hideDemo()">hide demo component</button>

// app.component.ts
public showDemoComponent: boolean = true;

hideDemo() {
  this.showDemoComponent = false
}

// demo.component.ts
ngOnDestroy() {
  console.log('9. demo ngOnDestroy')
}

PS: 不知道读者有没有发现，调用一次的钩子函数都比较常用～

【完】

更多编程相关知识，请访问：编程入门！！

以上是一文聊聊Angular中的生命週期的詳細內容。更多資訊請關注PHP中文網其他相關文章！