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

Question

我是 ionic 的新手 development.I 通过关注文章尝试了越来越多的方法。最后我尝试了这个请帮帮我 @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 硬件后退按钮。请帮我。先感谢您。最好的问候

Answer 1

你可以试试这个

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

Answer 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。

Answer 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
         });
     }

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

I can't handle android back button on Ionic 4

typescript

ionic-framework

ionic-native

angular

ionic4