ionic v4 关于返回鍵监听 （hardware back button）

发表于 | 更新于 | 阅读次数：

android手机上的返回键，会自动的使路由后退。但少数时候我们可能不需要这个后退功能，希望自己监听点击回退操作。
比如，想通过点击返回按钮关闭一个modal，并且不想后退。

1.使用@HostListener 监听ionBackButton事件

1
2
3
4
5
6
7
@HostListener('document:ionBackButton', ['$event'])
private overrideHardwareBackAction($event: any) {
　　$event.detail.register(100, async () => {
　　// Do what you want
　　this.modalController.dismiss();
　});
}

注意使用的是 $event.detail.register

2.使用 subscribeWithPriority 订阅 platform.backButton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private handleHardwareBackButton(): void {
    const sub = this.platform.backButton.subscribeWithPriority(9999, () => {
      console.log('called');
      this.dismiss();
    });
    this.subscriptions.push(sub);
  }

  ngOnInit() {
    this.getStates(this.payload);
    this.handleHardwareBackButton();
  }

  ngOnDestroy() {
    unsubscribeSubscriptions(this.subscriptions);
  }

这个方法同样是有效的，不要忘记取消订阅，不过我不知道使用多少优先级是最合适的，这方面的文档实在太少。
使用@HostListener 不能手动取消监听，想要手动控制可以使用Renderer2（现在还有Renderer3，不过我没用过）。

希望帮助到使用ionic 4和我有同样问题的人。