Ionic页面的生命周期 （事件）

原文出处：https://blog.csdn.net/wei11556/article/details/56484718
延伸阅读：Angular4学习笔记（九）- 生命周期钩子简介

官方文档

如官网文档所示，常用的生命周期有如下6个：

Event	Desc
ionViewDidLoad	当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发
ionViewWillEnter	顾名思义，当将要进入页面时触发
ionViewDidEnter	当进入页面时触发
ionViewWillLeave	当将要从页面离开时触发
ionViewDidLeave	离开页面时触发
ionViewWillUnload	当页面将要销毁同时页面上元素移除时触发

在demo中加入以下代码：

ionViewDidLoad(){
    console.log("1.0 ionViewDidLoad 当页面加载的时候触发，仅在页面创建的时候触发一次，如果被缓存了，那么下次再打开这个页面则不会触发");
}

ionViewWillEnter(){
    console.log("2.0 ionViewWillEnter 顾名思义，当将要进入页面时触发");
}

ionViewDidEnter(){
    console.log("3.0 ionViewDidEnter 当进入页面时触发");
}

ionViewWillLeave(){
    console.log("4.0 ionViewWillLeave 当将要从页面离开时触发");
}

ionViewDidLeave(){
    console.log("5.0 ionViewDidLeave 离开页面时触发");
}

ionViewWillUnload(){
    console.log("6.0 ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
}
 
ionViewCanEnter(){
    console.log("ionViewCanEnter");
}
 
ionViewCanLeave(){
    console.log("ionViewCanLeave");
}

运行结果

补充说明：

     ionViewCanEnter() 和 ionViewCanEnter()这2个很是很有用的守卫（Guard）钩子， 他们返回“布尔值”， 负责控制你是否可以进入页面和离开页。详情请查看：来扯点ionic3[3] 页面的生命周期事件，也就是凡间所说的钩子

    你可以把它理解成小区的看门大爷、和蔼可亲的班主任，以及古代杏花楼里的姿态万千的老鸨2333。

既然我们已经知道它能返回布尔值，那么就来试一试吧。因为我们的程序里没有业务逻辑，这里就用一个时间的API来判断吧，我写这篇文章的时候是晚上11点，那么就用getHours来帮助我们测试。

//和蔼可亲的班主任
    ionViewCanEnter() :boolean {
        if(new Date().getHours()>=8){
            console.log('怎么的呢，你看看现在几点了，你那么舒服咋不在家里接着睡吶，给我门外站着去！');
            return false;
        }
        return true;
    }

//杏花楼姿态万千的老鸨
    ionViewCanLeave() :boolean {
        if(new Date().getHours()>=22){
            console.log('哎呀公子，你看都这么晚了，最近外面风声那么紧，不如就在我们这儿留宿吧，你看姑娘们都舍不得你回去呢');
            return false;
        }
        return true;
    }