Ionic4中的生命周期函數(shù)和angualr7基本是一樣的炮姨,下面我們看看Ionic4中的生命周期函數(shù)仪芒,以及生命周期函數(shù)的用法平窘。
Ionic4中內置的生命周期函數(shù):
ionViewWillEnter?—當進入一個頁面時觸發(fā)(如果它從堆棧返回)
ionViewDidEnter?—進入后觸發(fā)
ionViewWillLeave?—如果頁面將離開觸發(fā)
ionViewDidLeave?—?在頁面離開后觸發(fā)
ionViewWillUnload?—?在Angular中沒有觸發(fā)金拒,因為這里你必須使用ngOnDestroy
Ionic4中使用Angular生命周期函數(shù):
1募书、Ionic4中的生命周期函數(shù)ngOnChanges?當被綁定的輸入屬性的值發(fā)生變化時調用(父子組件傳值的時候會觸發(fā)
2窥摄、Ionic4中的生命周期函數(shù)ngOnInit?請求數(shù)據(jù)一般放在這個里面?(重要*)
3镶奉、Ionic4中的生命周期函數(shù)ngDoCheck?檢測,并在發(fā)生 Angular 無法或不愿意自己檢測的變化時作出反應
4、Ionic4中的生命周期函數(shù)?ngAfterContentInit?當把內容投影進組件之后調用
5哨苛、Ionic4中的生命周期函數(shù)?ngAfterContentChecked?每次完成被投影組件內容的變更檢測之后調用
6鸽凶、Ionic4中的生命周期函數(shù)?ngAfterViewInit??初始化完組件視圖及其子視圖之后調用(dom操作放在這個里面)?(重要)
7、Ionic4中的生命周期函數(shù)?ngAfterViewInit??每次做完組件視圖和子視圖的變更檢測之后調用
8建峭、Ionic4中的生命周期函數(shù)??ngOnDestroy??組件銷毀后執(zhí)行?(重要)
? constructor() {
? ? ? console.log('00構造函數(shù)執(zhí)行了---除了使用簡單的值對局部變量進行初始化之外玻侥,什么都不應該做')
? ? }
? ? ngOnChanges() {
? ? ? console.log('01ngOnChages執(zhí)行了---當被綁定的輸入屬性的值發(fā)生變化時調用(父子組件傳值的時候會觸發(fā))');
? ? }
? ? ngOnInit() {
? ? ? ? console.log('02ngOnInit執(zhí)行了--- 請求數(shù)據(jù)一般放在這個里面');? ?
? ? }
? ? ngDoCheck() {
? ? ? ? //寫一些自定義的操作
? ? ? ? console.log('03ngDoCheck執(zhí)行了---檢測,并在發(fā)生 Angular 無法或不愿意自己檢測的變化時作出反應');
? ? ? ? if(this.userinfo!==this.oldUserinfo){
? ? ? ? ? ? console.log(`你從${this.oldUserinfo}改成${this.userinfo}`);
? ? ? ? ? ? this.oldUserinfo = this.userinfo;
? ? ? ? }else{? ? console.log("數(shù)據(jù)沒有變化");? ? ? ? ?}
? ? }
? ? ngAfterContentInit() {
? ? ? ? console.log('04ngAfterContentInit執(zhí)行了---當把內容投影進組件之后調用');
? ? }
? ? ngAfterContentChecked() {
? ? ? ? console.log('05ngAfterContentChecked執(zhí)行了---每次完成被投影組件內容的變更檢測之后調用');
? ? }
? ? ngAfterViewInit(): void {? ?
? ? ? ? console.log('06 ngAfterViewInit執(zhí)行了----初始化完組件視圖及其子視圖之后調用(dom操作放在這個里面)');
? ? }
? ? ngAfterViewChecked() {
?????console.log('07ngAfterViewChecked執(zhí)行了----每次做完組件視圖和子視圖的變更檢測之后調用');
? ? }
? ? ngOnDestroy() {
? ? ? ? console.log('08ngOnDestroy執(zhí)行了····');
? ? }
Ionic4內置生命周期函數(shù)使用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');? }
}