Ionic页面多次推入后Typescript代码失效问题求助

嘿，这个问题我之前开发Ionic应用时也碰到过！核心原因是你每次点击菜单都用push方法往导航栈里添加新的页面实例，而不是复用已存在的页面。当你多次点击后，导航栈里会堆好几个ParametersPage实例，后续进入旧实例时，那些只在页面首次初始化阶段执行的逻辑（比如写在ionViewDidLoad里的代码）不会再次触发，就会让你觉得“代码突然不生效了”。

下面给你两种靠谱的解决办法：

方法一：先检查页面是否存在，存在就切换，不存在再新增 #

修改app.component.ts里的open方法，先遍历导航栈看看目标页面是不是已经在栈里了，如果有就直接切过去，不用重复创建新实例：

@ViewChild(Nav) nav;

open(page: string) {
  const pageName = page + 'Page';
  // 检查导航栈里有没有目标页面
  const targetPage = this.nav.getActiveNavs()[0].getViews().find(view => view.component.name === pageName);
  
  if (targetPage) {
    // 存在的话，直接跳转到该页面（会自动弹出中间的页面）
    this.nav.popTo(targetPage);
  } else {
    // 不存在再新增页面
    this.nav.push(pageName);
  }
}

方法二：用setRoot替代push（适合不需要保留历史栈的场景） #

如果你的应用不需要保留之前页面的历史记录，每次点击菜单都直接把目标页面设为根页面，这样既不会堆积页面，每次进入页面时也能触发正确的生命周期钩子：

@ViewChild(Nav) nav;

open(page: string) {
  this.nav.setRoot(page + 'Page');
}

额外提醒：把页面逻辑放到正确的生命周期钩子上 #

另外别忘了检查parameters.ts里的代码，如果是每次进入页面都要执行的逻辑，别只放在ionViewDidLoad里（这个钩子只有页面第一次创建时才会跑一次），换成ionViewWillEnter或者ionViewDidEnter，这两个钩子每次进入页面都会触发：

// parameters.ts
ionViewWillEnter() {
  // 把每次进入都要执行的逻辑放在这里
  console.log('进入Parameters页面啦');
}

这样不管是第一次进入，还是从其他页面返回，你的逻辑都会正常执行~

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