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

╰+哭是因爲堅強的太久メ 2022-05-13 04:52 208阅读 0赞

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

[官方文档][Link 1]

![Center][]

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

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

在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");
    }

运行结果

![Center 1][]

补充说明：

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

[https_blog.csdn.net_wei11556_article_details_56484718]: https://blog.csdn.net/wei11556/article/details/56484718
[Angular4_-]: https://blog.csdn.net/chelen_jak/article/details/82620421
[Link 1]: http://ionicframework.com/docs/v2/api/navigation/NavController/
[Center]: /images/20220513/16eb0fa37a6d4337a9c2c8231e694dac.png
[Center 1]: /images/20220513/309a95e7d91d42a3bcc52a1743dabc50.png
[ionic3_3_]: https://www.jianshu.com/p/72b704b5c9ed