ionic3 page组件 生命周期

ionic3 page组件 生命周期 基本生命周期 基类:用于打印日志 以下的顺序是单一page的生命周期

export class Page {

    constructor(public tag: string, public app: App) {
        console.log('0 ', this.tag, ' constructor')
    };
    //能否进入page
    ionViewCanEnter(): boolean {
        console.log('1 ', this.tag, ' ionViewCanEnter');
        return true;
    }
    //完成加载
    ionViewDidLoad() {
        console.log('2 ', this.tag, ' ionViewDidLoad');
    }
    //将要进入
    ionViewWillEnter() {
        console.log('3 ', this.tag, ' ionViewWillEnter');
    }
    //进入
    ionViewDidEnter() {
        console.log('4 ', this.tag, ' ionViewDidEnter');
        this.app.getRootNavs().forEach(nav=>{
            nav.getViews().forEach(view => {
                console.log(this.tag, ' index:' + view.index, ',  id: ' + view.id, ',  name:' + view.name)
            })
        })

    }
    //能否离开page
    ionViewCanLeave(): boolean {
        console.log('5 ', this.tag, ' ionViewCanLeave');
        return true;
    }
    //将要离开
    ionViewWillLeave() {
        console.log('6 ', this.tag, ' ionViewWillLeave');
    }
    //离开
    ionViewDidLeave() {
        console.log('7 ', this.tag, ' ionViewDidLeave');
    }
    //将要退出page
    ionViewWillUnload() {
        console.log('8 ', this.tag, ' ionViewWillUnload');
    }

}

1. 页面跳转LoginPage push TabsPage

//进入应用
0  LoginPage  constructor
1  LoginPage  ionViewCanEnter
2  LoginPage  ionViewDidLoad
3  LoginPage  ionViewWillEnter
4  LoginPage  ionViewDidEnter

LoginPage  index:0 ,  id: n4-0 ,  name:LoginPage

//跳转
0  TabsPage  constructor
5  LoginPage  ionViewCanLeave
1  TabsPage  ionViewCanEnter
2  TabsPage  ionViewDidLoad
//LoginPage将离开
6  LoginPage  ionViewWillLeave
//TabsPage进入
3  TabsPage  ionViewWillEnter
4  TabsPage  ionViewDidEnter

TabsPage  index:0 ,  id: n4-0 ,  name:LoginPage
TabsPage  index:1 ,  id: n4-1 ,  name:TabsPage

////LoginPage离开
7  LoginPage  ionViewDidLeave

//返回
5  TabsPage  ionViewCanLeave
1  LoginPage  ionViewCanEnter
6  TabsPage  ionViewWillLeave
3  LoginPage  ionViewWillEnter
4  LoginPage  ionViewDidEnter

LoginPage  index:0 ,  id: n4-0 ,  name:LoginPage
LoginPage  index:1 ,  id: n4-1 ,  name:TabsPage

7  TabsPage  ionViewDidLeave
8  TabsPage  ionViewWillUnload

//返回界面后,点击获取栈中page的信息,发现TabsPage已被移除
LoginPage  index:0 ,  id: n4-0 ,  name:LoginPage
--------------------- 

2. LoginPage push TabsPage时Tab页面加载

//进入应用
0  LoginPage  constructor
1  LoginPage  ionViewCanEnter
2  LoginPage  ionViewDidLoad
3  LoginPage  ionViewWillEnter
4  LoginPage  ionViewDidEnter

LoginPage  index:0 ,  id: n4-0 ,  name:LoginPage

//跳转到Tabs
0  TabsPage  constructor  
5  LoginPage  ionViewCanLeave
1  TabsPage  ionViewCanEnter
2  TabsPage  ionViewDidLoad
//Tab(HomePage)加载
0  HomePage  constructor
1  HomePage  ionViewCanEnter
2  HomePage  ionViewDidLoad

6  LoginPage  ionViewWillLeave

3  TabsPage  ionViewWillEnter
3  HomePage  ionViewWillEnter
4  HomePage  ionViewDidEnter

HomePage  index:0 ,  id: n4-0 ,  name:LoginPage
HomePage  index:1 ,  id: n4-1 ,  name:TabsPage

4  TabsPage  ionViewDidEnter

TabsPage  index:0 ,  id: n4-0 ,  name:LoginPage
TabsPage  index:1 ,  id: n4-1 ,  name:TabsPage

7  LoginPage  ionViewDidLeave

//返回
5  TabsPage  ionViewCanLeave
1  LoginPage  ionViewCanEnter
6  TabsPage  ionViewWillLeave
3  LoginPage  ionViewWillEnter
4  LoginPage  ionViewDidEnter

LoginPage  index:0 ,  id: n4-0 ,  name:LoginPage
LoginPage  index:1 ,  id: n4-1 ,  name:TabsPage
//返回时,只有TabsPage执行ionViewDidLeave. 但tab之间的跳转时是会执行的
7  TabsPage  ionViewDidLeave
//备注:Tabs willUnload顺序, 先TabsPage,然后按tab标签顺序
8  TabsPage  ionViewWillUnload
8  HomePage  ionViewWillUnload

LoginPage  index:0 ,  id: n4-0 ,  name:LoginPage
--------------------- 

3、LoginPage setRoot TabsPage时的生命周期

//进入应用
0  LoginPage  constructor
1  LoginPage  ionViewCanEnter
2  LoginPage  ionViewDidLoad
3  LoginPage  ionViewWillEnter
4  LoginPage  ionViewDidEnter

LoginPage  index:0 ,  id: n4-0 ,  name:LoginPage

//跳转到Tabs
0  TabsPage  constructor  
5  LoginPage  ionViewCanLeave
1  TabsPage  ionViewCanEnter
2  TabsPage  ionViewDidLoad

//Tab(HomePage)加载
0  HomePage  constructor
1  HomePage  ionViewCanEnter
2  HomePage  ionViewDidLoad
6  LoginPage  ionViewWillLeave
3  TabsPage  ionViewWillEnter
4  TabsPage  ionViewDidEnter

TabsPage  index:0 ,  id: n4-1 ,  name:TabsPage
TabsPage  index:1 ,  id: n4-0 ,  name:LoginPage

7  LoginPage  ionViewDidLeave
8  LoginPage  ionViewWillUnload

//LoginPage willUnload之后才加载tab(HomePage)
3  HomePage  ionViewWillEnter
4  HomePage  ionViewDidEnter

HomePage  index:0 ,  id: n4-1 ,  name:TabsPage