在Ionic2结合Angular2中获取当前页面名称时遇报错问题

这个问题我做Ionic项目时也踩过坑！核心原因是页面构造函数执行的时机太早了——当constructor运行的时候，当前页面还没被NavController完全加载并加入到活跃导航栈中，这时候调用this.navCtrl.getActive()会返回undefined，自然就触发了Cannot read property 'name' of undefined的错误。

正确的解决方案：利用Ionic页面生命周期钩子 #

Ionic提供了一系列页面生命周期钩子，我们可以把获取当前页面名称的逻辑放到页面已经激活后的钩子函数里，比如ionViewDidEnter或者ionViewWillEnter：

修改后的代码示例：

constructor(public navCtrl: NavController, public http: Http) {
  // 构造函数只做初始化工作，不要在这里获取活跃页面
  // this.navCtrl.push(AccountPage) 这个操作如果需要保留是没问题的
}

// 页面完全进入并激活后触发（推荐用这个，状态最稳定）
ionViewDidEnter() {
  const activePage = this.navCtrl.getActive();
  if (activePage) { // 加个判断更稳妥，避免极端情况
    console.log(activePage.name);
  }
}

如果需要在页面即将进入但还没完全显示时获取，可以用ionViewWillEnter：

ionViewWillEnter() {
  const activePage = this.navCtrl.getActive();
  if (activePage) {
    console.log(activePage.name);
  }
}

补充说明 #

Ionic页面的生命周期执行顺序是：constructor → ionViewWillLoad → ionViewWillEnter → ionViewDidEnter，其中constructor是最早执行的，此时页面还未被导航栈确认激活，所以拿不到活跃页面实例。而ionViewDidEnter是在页面已经呈现给用户后触发，此时导航栈的状态已经稳定，能确保getActive()返回正确的页面对象。

内容的提问来源于stack exchange，提问作者user6579134