Ionic中如何避免键盘事件处理被页面栈中所有页面继承？

这个问题的根源在于你通过host绑定了全局的document keydown事件——Ionic的导航栈采用"push/pop"模式，当你从Page1跳转到Page2时，Page1并没有被销毁，只是被隐藏在导航栈中，所以它绑定的全局键盘事件监听依然会生效，导致Page2中按下回车时依然会触发Page1的处理逻辑。

下面给你两种可靠的解决方法，优先推荐第一种：

方法一：利用Ionic页面生命周期钩子手动管理事件监听 #

这种方式能精准控制事件监听的生效时机：当Page1进入前台时添加监听，离开前台时移除监听，完全不会影响其他页面。

步骤： #

1. 移除@Component中的host配置
2. 在页面的ionViewDidEnter钩子中添加document的keydown监听
3. 在ionViewWillLeave钩子中移除对应的监听

注意：一定要提前绑定好事件处理函数的this上下文，避免addEventListener和removeEventListener引用的不是同一个函数实例（直接用bind(this)会每次生成新函数，导致无法正确移除）。

完整代码示例：

@Component({ 
  selector: 'page-page1',
  templateUrl: 'page1.html'
  // 去掉原来的host配置
}) 
export class Page1{ 
  // 提前绑定好上下文的事件处理函数引用
  private boundKeyboardHandler: (event: KeyboardEvent) => void;

  constructor(private navCtrl: NavController) {
    // 绑定this，确保add/remove使用同一个函数实例
    this.boundKeyboardHandler = this.handleKeyboardEvent.bind(this);
  }

  // 页面进入前台时添加监听
  ionViewDidEnter() {
    document.addEventListener('keydown', this.boundKeyboardHandler);
  }

  // 页面离开前台时移除监听
  ionViewWillLeave() {
    document.removeEventListener('keydown', this.boundKeyboardHandler);
  }

  handleKeyboardEvent(event: KeyboardEvent) { 
    if(event.which === 13){ 
      console.log("You pressed Enter!"); 
    } 
  }

  // 跳转到Page2的方法
  goToPage2() {
    this.navCtrl.push(Page2, {});
  }
}

方法二：在事件处理函数中判断当前活跃页面（不推荐） #

如果暂时不想修改事件绑定方式，也可以在handleKeyboardEvent中先判断当前导航栈的顶端页面是否是Page1，只有当Page1是活跃页面时才执行逻辑：

handleKeyboardEvent(event: KeyboardEvent) { 
  // 获取当前活跃页面的实例
  const activePage = this.navCtrl.getActive();
  if(activePage instanceof Page1 && event.which === 13){ 
    console.log("You pressed Enter!"); 
  } 
}

这种方式虽然能临时解决问题，但本质上全局监听依然存在，不如方法一高效和优雅，所以优先推荐第一种方案。

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