ionic v4 关于返回鍵监听 (hardware back button)

android手机上的返回键,会自动的使路由后退。但少数时候我们可能不需要这个后退功能,希望自己监听点击回退操作。

比如,想通过点击返回按钮关闭一个modal,并且不想后退。

1.使用@HostListener 监听ionBackButton事件

@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

 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和我有同样问题的人。

 

posted on 2018-11-14 22:28  StarDee  阅读(2522)  评论(0编辑  收藏  举报