iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 10
1

本文同步發佈於:Claire's BLOG

Lifecycle Hooks


一個組件有一個由Angular管理的生命週期。

Angular創建、產生元件,當元件的數據綁定屬性改變時做檢查並確認,並在元件從DOM中刪除它之前destroys掉該元件。

Angular提供lifecycle hooks,可以讓我們在各個階段加上我們要讓元件做的事情。

directive具有相同的lifecycle hooks。

如何使用Lifecycle Hooks

下面為一個使用範例

export class PeekABoo implements OnInit {
  constructor(private logger: LoggerService) { }

  // implement OnInit's `ngOnInit` method
  ngOnInit() { this.logIt("OnInit"); }

  logIt(msg: string) {
    this.logger.log("#${nextId++} ${msg}");
  }
}

Lifecycle sequence

  • ngOnChanges()

Angular設置數據綁定的輸入屬性。會在ngOnInit()之前被呼叫

  • ngOnInit()

在Angular之後初始化指令,組件首先顯示數據綁定屬性,並設置directive及component的輸入屬性。

  • ngDoCheck()

檢測Angular無法或無法自行檢測到的更改,並採取相應措施。

  • ngAfterContentInit()

在Angular將外部內容設置到template之後被呼叫。  

  • ngAfterContentChecked()

在Angular檢查投影到組件中的內容之後被呼叫。

  • ngAfterViewInit()

初始化組件的template和sub-template之後被呼叫。

  • ngAfterViewChecked()

在Angular檢查組件的視圖和子視圖之後作出響應。

  • ngOnDestroy

在Angular破壞指令/組件之前進行清理。取消訂閱Observables和事件處理程序以避免內存洩漏。

範例練習

範例網址:https://angular.io/guide/lifecycle-hooks#peek-a-boo


上一篇
[功能介紹-2] 資料繫結的模版語法
下一篇
[功能介紹-4] 組件間的溝通
系列文
用30天深入Angular 5的世界31

尚未有邦友留言

立即登入留言