Ionic生命週期

ionic的生命週期

1、ionic的生命週期函數：

import {
        Component
    } from '@angular/core';
    
    @Component({
        template: 'Hello World'
    })
    class HelloWorld {
        ionViewDidLoad() {
            console.log("I'm alive!");
        }
        ionViewWillLeave() {
            console.log("Looks like I'm about to leave :(");
        }
    
        ionViewCanLeave(): boolean {
            // here we can either return true or false
            // depending on if we want to leave this view
            if (isValid(randomValue)) {
                return true;
            } else {
                return false;
            }
        }
    }

• Pages的生命週期函數：

生命週期事件它被定義在不一樣的navigation狀態期間，它們能被定義到任何push/pop在NavController中的組件。

• Pages的生命週期函數列表：

ionViewDidLoad 當頁面已經載入後，這個事件僅當頁面被建立時執行一次。若是一個頁面離開，可是已經緩存，那麼後續的查看也不會觸發。當爲某個頁面設置代碼時，可放在該方法裏。
ionViewWillEnter當頁面將要進入並變成激活頁面時觸發。
ionViewDidEnter當頁面已經進去並激活了，無論它是不是第一次載入仍是一個緩存的頁面，該事件都觸發。
ionViewWillLeave當頁面將要離開，將再也不是一個激活的頁面時觸發。
ionViewDidLeave當頁面已經離開，不是一個激活頁面時觸發。
ionViewWillUnload當頁面將要銷燬並移除其元素時觸發。
ionViewCanEnter在視圖能夠進入以前運行。 這能夠在通過身份驗證的視圖中用做一種「保護」，您須要在視圖能夠進入以前檢查權限。
ionViewCanLeave在視圖能夠離開以前運行。 這能夠在通過身份驗證的視圖中用做一種「保護」，您須要在視圖離開以前檢查權限。

2、angular的組件生命週期函數(Lifecycle Hooks)

ngOnChanges()
當Angular（從新）設置數據綁定輸入屬性時響應。當被綁定的輸入屬性的值發生變化時調用，首次調用必定會發生在ngOnInit()以前。
ngOnInit()
在Angular第一次顯示數據綁定和設置指令/組件的輸入屬性以後，初始化指令/組件。在第一輪ngOnChanges()完成以後調用，只調用一次。
ngDoCheck()
檢測，並在發生Angular沒法或不肯意本身檢測的變化時做出反應。在每一個Angular變動檢測週期中調用，ngOnChanges()和ngOnInit()以後。
ngAfterContentInit()
當把內容投影進組件以後調用。第一次ngDoCheck()以後調用，只調用一次。
只適用於組件。
ngAfterContentChecked()
每次完成被投影組件內容的變動檢測以後調用。ngAfterContentInit()和每次ngDoCheck()以後調用，只適合組件。
ngAfterViewInit()
初始化完組件視圖及其子視圖以後調用。第一次ngAfterContentChecked()以後調用，只調用一次。只適合組件。
ngAfterViewChecked()
每次作完組件視圖和子視圖的變動檢測以後調用。
ngAfterViewInit()和每次ngAfterContentChecked()以後調用。只適合組件。
ngOnDestroy
當Angular每次銷燬指令/組件以前調用並清掃。 在這兒反訂閱可觀察對象和分離事件處理器，以防內存泄漏。在Angular銷燬指令/組件以前調用。

@Directive({selector: '[mySpy]'})
export class SpyDirective implements OnInit, OnDestroy {

  constructor(private logger: LoggerService) { }

  ngOnInit()    { this.logIt(`onInit`); }

  ngOnDestroy() { this.logIt(`onDestroy`); }

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