我无法处理 Ionic 4 上的 android 后退按钮答案

【问题标题】：I can't handle android back button on Ionic 4我无法处理 Ionic 4 上的 android 后退按钮
【发布时间】：2020-01-24 02:06:27
【问题描述】：

我是离子开发的新手。我通过以下文章尝试了越来越多的方法。最后我试过这个Handling hardware back button in Ionic3 Vs Ionic4 请帮助我 @Fabian N.

但在设备上，我看不出后退按钮是否与代码有关……也就是说，代码在我的情况下不起作用。 :(

这是我的离子信息。

Ionic:

   Ionic CLI                     : 5.2.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 16 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.1
   NodeJS     : v11.10.1 (/usr/local/bin/node)
   npm        : 6.7.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2 Build version 10E125

我已经在app.component.ts 中尝试了以下事件。但是当点击返回按钮时，我无法在真实设备上收到任何警报。

1. Test case
  this.platform.backButton.subscribe(async () => {
     alert("Fired Back Button"); 
  });

2. Test case
  this.platform.backButton.subscribe(() => {
     alert("Fired Back Button"); 
  });

3. test case
  this.platform.backButton.subscribeWithPriority(0, () => {
     alert("Fired Back Button"); 
  });



4. test case
  this.platform.backButton.subscribeWithPriority(100, () => {
     alert("Fired Back Button"); 
  });

在这种情况下 4，我尝试了诸如优先级：100、101、400、999999。但是单击 android 后退按钮时我无法收到任何警报。

但实际上返回按钮总是弹出页面。

我只需要在我的项目中处理 android 硬件后退按钮。请帮我。先感谢您。最好的问候

【问题讨论】：

请正确描述您的问题并显示一些代码。您收到错误消息吗？如果有，是哪一个？
嗨@DanielHilgarth 感谢您的回复。我已经用我尝试过的代码修改了我的问题。请检查并帮助我。

标签： angular typescript ionic-framework ionic4 ionic-native

【解决方案1】：

你可以试试这个

this.platform.backButton.subscribe(() => {
  // this does work
});

【讨论】：

嗨@yoosuf，感谢您的回复，我已经尝试过，但我无法返回范围上的按钮事件。谢谢

【解决方案2】：

我的问题终于得到了正确答案。解决方案是Enol's answer。我已经写在我的app.component.ts 文件中了。

const event = fromEvent(document, 'backbutton');
event.subscribe(async () => {
  // logic for navigation, modal, popover, menu closing
  this.navCtrl.pop(); // I have used for my case

  ...

});

谢谢Markus。

【讨论】：

【解决方案3】：

重构智一的答案

这项工作！

    const event = fromEvent(document, 'ionBackButton');
    event.subscribe(async () => {
        console.log('hardware back button triggered')
    })

    //you may want store that subscription and unbscribe on ngOnDestroy.

或peterpeterparker solution from github

    @HostListener('document:ionBackButton', ['$event'])
     private overrideHardwareBackAction($event: any) {
         $event.detail.register(100, async () => {
          // Do what you want
         });
     }

【讨论】：