ionic 页面生命周期

ionic 页面的生命周期

 // 第一页面的代码
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.log("页面：第一页：constructor>>1.1、初始化数据，页面未创建");
  }
  ionViewCanEnter(){
    console.log("页面：第一页：ionViewCanEnter>>1.2、页面初始化结束，可以加载");
  }
  ionViewDidLoad() {
    console.log("页面：第一页：ionViewDidLoad>>1.3、页面加载完成");
  }
  ionViewWillEnter(){
    console.log("页面：第一页：ionViewWillEnter>>1.4、页面将要显现");
  }
  ionViewDidEnter(){
    console.log("页面：第一页：ionViewDidEnter>>1.5、页面显现完成");
  }
  ionViewCanLeave(){
    console.log("页面：第一页：ionViewCanLeave>>1.6、页面已准备离开，开始加载下一页面");
  }
  ionViewWillLeave(){
    console.log("页面：第一页：ionViewWillLeave>>1.7、下一页面已创建完成，页面将要离开");
  }
  ionViewDidLeave(){
    console.log("页面：第一页：ionViewDidLeave>>1.8、页面离开");
  }
  ionViewWillUnload(){
    console.log("页面：第一页：ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
  }

  purchaseInfoInputNextBtnClick(){
    console.log(">>>点击跳转至第二页面");
    this.navCtrl.push("PurchaseInfoConfirmPage");
  }

// 第二页面的代码

@ViewChild(Navbar) navBar: Navbar;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    console.log("页面：第二页：constructor>>2.1、页面开始初始化");
  }
  ionViewCanEnter(){
    console.log("页面：第二页：ionViewCanEnter>>2.2、页面初始化结束，可以加载");
  }
  ionViewDidLoad() {
    // 处理页面的返回按钮点击事件
    this.navBar.backButtonClick = this.backButtonClick;
    console.log("页面：第二页：ionViewDidLoad>>2.3、页面加载完成");
  }
  backButtonClick = (e: UIEvent) => {
    console.log(">>>点击返回第一页");
    this.navCtrl.pop();
  };
  ionViewWillEnter(){
    console.log("页面：第二页：ionViewWillEnter>>2.4、页面将要显现");
  }
  ionViewDidEnter(){
    console.log("页面：第二页：ionViewDidEnter>>2.5、页面显现完成");
  }
  ionViewCanLeave(){
    console.log("页面：第二页：ionViewCanLeave>>2.6、页面已准备离开，开始加载下一页面");
  }
  ionViewWillLeave(){
    console.log("页面：第二页：ionViewWillLeave>>2.7、下一页面已创建完成，页面将要离开");
  }
  ionViewDidLeave(){
    console.log("页面：第二页：ionViewDidLeave>>2.8、页面离开");
  }
  ionViewWillUnload(){
    console.log("页面：第二页：ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
  }

---

页面运行结果如下：