Ionic5硬件返回按钮回调触发两次问题如何解决？

触发原因 #

• 订阅未及时销毁：代码中订阅逻辑写在构造函数中，若对应组件/页面被多次实例化且未在销毁时取消订阅，会残留多个有效订阅实例，触发返回按钮时所有订阅会同步执行。
• 优先级冲突：你设置的订阅优先级10和Ionic内置的返回逻辑（如模态框关闭、页面栈回退等）优先级重合，会导致事件被多次分发触发。
• 平台事件多端推送：部分开发场景下，Platform实例的backButton事件会同时响应浏览器模拟事件和原生硬件事件，导致回调被执行两次。

解决思路 #

• 调整订阅生命周期，及时销毁订阅
  不要将订阅逻辑写在构造函数中，改为在页面激活生命周期订阅，页面离开时取消订阅，参考代码：

import { Platform } from '@ionic/angular';
import { Subscription } from 'rxjs';

export class TargetPage {
  private backButtonSub: Subscription;
  constructor(private platform: Platform) {}

  // 页面进入激活状态时订阅
  ionViewDidEnter() {
    this.backButtonSub = this.platform.backButton.subscribeWithPriority(99, () => {
      // 调用你的自定义函数
    });
  }

  // 页面离开时销毁订阅
  ionViewWillLeave() {
    if (this.backButtonSub && !this.backButtonSub.closed) {
      this.backButtonSub.unsubscribe();
    }
  }
}

• 调整订阅优先级
  Ionic内置返回逻辑优先级规则：模态框/弹窗关闭优先级为100，默认页面回退优先级为0，将你的自定义优先级设置为99即可覆盖默认返回逻辑，同时不会和弹窗关闭逻辑冲突。
• 添加防抖逻辑兜底
  如果还有偶发重复触发的情况，可以给事件流添加防抖处理，短时间内的多次触发只会执行一次回调，参考代码：

import { debounceTime } from 'rxjs/operators';

ionViewDidEnter() {
  this.backButtonSub = this.platform.backButton
    .pipe(debounceTime(200))
    .subscribeWithPriority(99, () => {
      // 自定义逻辑
    });
}

• 增加激活态校验
  回调执行前先判断当前页面是否为激活态，避免后台残留的订阅触发逻辑。

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