I can't handle android back button on Ionic 4

问题

I am new on ionic development.I have tried more and more way by following articles. Finally I have tried on this Handling hardware back button in Ionic3 Vs Ionic4 Please help me @Fabian N.

But on device, I can't seem if the back button work regards code... that is the code is not work in my case. :(

This is my ionic info.

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

Already I have tried bellow event in app.component.ts. but I can't get any alert on real device when click back button.

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

In this case 4, I have tried such as priorities : 100, 101, 400, 999999. but I can't get any alert when click android back button.

But the actually back button always pop pages.

I just need to handle android hardware back button on my project. Please help me. Thank you in advance. Best Regards

回答1:

refactoring ZhiYi's answer

This work!

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

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

Or peterpeterparker solution from github

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

回答2:

Finally I have got correct answer for my question. The solution was Enol's answer. I have wrote in my app.component.ts file.

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

  ...

});

Thanks Markus.

回答3:

You can try this one

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

来源：https://stackoverflow.com/questions/58071996/i-cant-handle-android-back-button-on-ionic-4

标签

angular

typescript

ionic-framework

ionic4

ionic-native