ionic4生命周期

Ionic4中内置的生命周期函數：

ionViewWillEnter —當進入一個頁面時觸發(如果它從堆棧傳回)

ionViewDidEnter —進入後觸發

ionViewWillLeave —如果頁面将離開觸發

ionViewDidLeave — 在頁面離開後觸發

ionViewWillUnload — 在Angular中沒有觸發，因為這裡你必須使用ngOnDestroy
           

Ionic4中使用Angular生命周期函數：

1、Ionic4中的生命周期函數ngOnChanges 當被綁定的輸入屬性的值發生變化時調用(父子元件傳值的時候會觸發

2、Ionic4中的生命周期函數ngOnInit 請求資料一般放在這個裡面 (重要*)

3、Ionic4中的生命周期函數ngDoCheck 檢測，并在發生 Angular 無法或不願意自己檢測的變化時作出反應

4、Ionic4中的生命周期函數 ngAfterContentInit 當把内容投影進元件之後調用

5、Ionic4中的生命周期函數 ngAfterContentChecked 每次完成被投影元件内容的變更檢測之後調用

6、Ionic4中的生命周期函數 ngAfterViewInit  初始化完元件視圖及其子視圖之後調用(dom操作放在這個裡面) (重要)

7、Ionic4中的生命周期函數 ngAfterViewInit  每次做完元件視圖和子視圖的變更檢測之後調用

8、Ionic4中的生命周期函數  ngOnDestroy  元件銷毀後執行 (重要)

  constructor() {       console.log('00構造函數執行了---除了使用簡單的值對局部變量進行初始化之外，什麼都不應該做')     }

    ngOnChanges() {       console.log('01ngOnChages執行了---當被綁定的輸入屬性的值發生變化時調用(父子元件傳值的時候會觸發)');     }

    ngOnInit() {         console.log('02ngOnInit執行了--- 請求資料一般放在這個裡面');        }

    ngDoCheck() {         //寫一些自定義的操作         console.log('03ngDoCheck執行了---檢測，并在發生 Angular 無法或不願意自己檢測的變化時作出反應');         if(this.userinfo!==this.oldUserinfo){             console.log(

你從${this.oldUserinfo}改成${this.userinfo}

);             this.oldUserinfo = this.userinfo;         }else{    console.log("資料沒有變化");         }     }

    ngAfterContentInit() {         console.log('04ngAfterContentInit執行了---當把内容投影進元件之後調用');     }

    ngAfterContentChecked() {         console.log('05ngAfterContentChecked執行了---每次完成被投影元件内容的變更檢測之後調用');     }

    ngAfterViewInit(): void {            console.log('06 ngAfterViewInit執行了----初始化完元件視圖及其子視圖之後調用(dom操作放在這個裡面)');     }

    ngAfterViewChecked() {      console.log('07ngAfterViewChecked執行了----每次做完元件視圖和子視圖的變更檢測之後調用');     }

    ngOnDestroy() {         console.log('08ngOnDestroy執行了····');     }

Ionic4内置生命周期函數使用demo

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

import { StorageService } from '../services/storage.service';

@Component({

  selector: 'app-tab4',

  templateUrl: './tab4.page.html',

  styleUrls: ['./tab4.page.scss'],

})

export class Tab4Page implements OnInit {

  public userinfo:any='';

  constructor(public storage:StorageService) {



  }

  ngOnInit() { }

  ionViewWillEnter(){

    console.log('ionViewWillEnter');

  }

  ionViewDidEnter(){console.log('ionViewDidEnter');  }

}