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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM