Ionic自定义硬件返回按钮功能无法取消订阅问题排查

问题根源 #

你每次为返回按钮创建新订阅时，都没有销毁之前的订阅实例，仅将新订阅覆盖到subscriptionBack变量上，导致多个订阅同时生效。离开Quizz页面时，你仅能销毁最后一次赋值给subscriptionBack的订阅，更早创建的残留订阅会一直在后台运行，这就是你回到Home页后还会触发Quizz页面逻辑的原因。

修复方案 #

首先新增统一的订阅清理方法，所有创建新订阅的位置都先执行清理逻辑，避免残留：

// 类内新增属性和清理方法
private subscriptionBack: Subscription | null = null;

private clearBackSub(): void {
  if (this.subscriptionBack && !this.subscriptionBack.closed) {
    this.subscriptionBack.unsubscribe();
  }
  this.subscriptionBack = null;
}

调整leaveQuizz逻辑，每次创建新订阅前先清理旧订阅：

async leaveQuizz(){
  console.log("leave quizz request");
  if(await this.statsService.checkSoundState()){
    this.nav_fx_sound.play();
  }

  // 先清理旧订阅再创建新订阅
  this.clearBackSub();
  this.subscriptionBack = this.platform.backButton.subscribeWithPriority(9999, () => {
    console.log('Setting back button to close confirmation popup!');
    this.modalController.dismiss();
    console.log("SUBSCRIPTION TO CLOSE POPUP WITH BACK : ");
    console.log(this.subscriptionBack);
  });

  const modal = await this.modalController.create({
    component: ConfirmationPopupPage,
    cssClass: 'modalCss2'
  });

  modal.onDidDismiss().then(value => {
    // 弹窗关闭后先清理弹窗阶段的订阅，再创建返回退出的订阅
    this.clearBackSub();
    this.subscriptionBack = this.platform.backButton.subscribeWithPriority(9999, () => {
      console.log('Setting back button to leave quizz!');
      this.leaveQuizz();
      console.log("SUBSCRIPTION TO QUIT QUIZZ WITH BACK : ");
      console.log(this.subscriptionBack);
    });
  })

  return await modal.present();
}

调整生命周期钩子逻辑：

ionViewWillEnter(){
  this.ngOnInit();
  // 进入页面先清理可能的残留订阅
  this.clearBackSub();
  this.subscriptionBack = this.platform.backButton.subscribeWithPriority(9999, () => {
    console.log('Setting back button to leave quizz!');
    this.leaveQuizz();
    console.log("SUBSCRIPTION TO QUIT QUIZZ WITH BACK : ");
    console.log(this.subscriptionBack);
  });
}

ionViewWillLeave(){
  // 离开页面清理所有订阅，同时关闭可能存在的弹窗
  this.clearBackSub();
  this.modalController.dismiss().catch(() => {});
  console.log("unsubscribing all back button subscriptions");
}

修改后所有订阅都会在不需要的时候被及时销毁，不会有残留逻辑在后台运行，回到Home页后返回按钮就会恢复默认行为。

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