Angular 元件的生命週期

Posted on | by dannyliu

angular 元件的生命週期

  1. ngOnChanges

  2. ngOnInit

  3. ngDoCheck

  4. ngAfterContentInit

  5. ngAfterContentChecked

  6. ngAfterViewInit

  7. ngAfterViewChecked

  8. ngOnDestroy

Angular – 生命週期鉤子

鉤子方法 用途 時機
ngOnChanges() 當 Angular 設定或重新設定資料繫結的輸入屬性時響應。 該方法接受當前和上一屬性值的 SimpleChanges 物件注意，這發生的非常頻繁，所以你在這裡執行的任何操作都會顯著影響效能。 欲知詳情，參閱本文件的使用變更檢測鉤子。 在 ngOnInit() 之前以及所繫結的一個或多個輸入屬性的值發生變化時都會呼叫。注意，如果你的元件沒有輸入，或者你使用它時沒有提供任何輸入，那麼框架就不會呼叫 ngOnChanges()。
ngOnInit() 在 Angular 第一次顯示資料繫結和設定指令/元件的輸入屬性之後，初始化指令/元件。 欲知詳情，參閱本文件中的初始化元件或指令。 在第一輪 ngOnChanges() 完成之後呼叫，只調用一次。
ngDoCheck() 檢測，並在發生 Angular 無法或不願意自己檢測的變化時作出反應。 欲知詳情和範例，參閱本文件中的自訂變更檢測。 緊跟在每次執行變更檢測時的 ngOnChanges() 和 首次執行變更檢測時的 ngOnInit() 後呼叫。
ngAfterContentInit() 當 Angular 把外部內容投影進元件檢視或指令所在的檢視之後呼叫。欲知詳情和範例，參閱本文件中的響應內容中的變更。 第一次 ngDoCheck() 之後呼叫，只調用一次。
ngAfterContentChecked() 每當 Angular 檢查完被投影到元件或指令中的內容之後呼叫。欲知詳情和範例，參閱本文件中的響應被投影內容的變更。 ngAfterContentInit() 和每次 ngDoCheck() 之後呼叫
ngAfterViewInit() 當 Angular 初始化完元件檢視及其子檢視或包含該指令的檢視之後呼叫。欲知詳情和範例，參閱本文件中的響應檢視變更。 第一次 ngAfterContentChecked() 之後呼叫，只調用一次。
ngAfterViewChecked() 每當 Angular 做完元件檢視和子檢視或包含該指令的檢視的變更檢測之後呼叫。 ngAfterViewInit() 和每次 ngAfterContentChecked() 之後呼叫。
ngOnDestroy() 每當 Angular 每次銷燬指令/元件之前呼叫並清掃。 在這兒反訂閱可觀察物件和分離事件處理器，以防記憶體洩漏。 欲知詳情，參閱本文件中的在實例銷燬時進行清理。 在 Angular 銷燬指令或元件之前立即呼叫。

在宣告 implements 雖然你會覺得這樣子寫很麻煩，但是你會非常清楚這個 Component 有 hook那些事件

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

@Component({
  selector: 'app-server',
  templateUrl: './server.component.html',
  styleUrls: ['./server.component.css'],
})
export class ServerComponent  implements  OnChanges, OnInit
{
  @Input() name : string ="" ;

  constructor() {
    console.log(`constructor`);
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('ngOnChanges');
    console.log(changes);
  }

  ngOnInit(): void {
    console.log(`ngOnInit`);
  }
}
  • SimpleChange
    file

So again, I did these changes so that we can really see when ngOnChanges gets fired and we couldn’t

use the element as an object because objects are the reference types, so we passed the object via input,

因此，我再次進行了這些更改，以便我們可以真正看到 ngOnChanges 何時被觸發而我們不能

使用元素作為對象，因為對像是引用類型，所以我們通過輸入傳遞對象，

改物件裡面的值OnChange是偵測不到得~

但是直接改傳遞值是知道的

這是JavaScript的背景知識

開發模式下Angular會做額外的變更偵測，所以會看到兩次

file

ngDoCheck() 的觸發情境有很多，例如點擊或是promise回應等

老師不建議寫太多耗能的運算在裡面，但如果你想手動檢查或偵測狀態的話，就寫在這個地方

file

ngAfterContentInit()
把ng-content的內容投射至Component的View之後呼叫
只會在第一次初始化後執行

影片

Facebook留言板
fb-share-icon