Ionic 4 - Hardware Back Button Return to Root (Home)

Ionic Framework
1

I’m currently trying to setup a custom hardware back button function for my app through Android Devices. My current setup includes a Home Page -> Page 1 -> Page 2 -> Page 3. What I’d like to have happen is when the user is currently on Page 3 and hits the hardware back button on an Android device, the user is then sent back to the home page every time.

I have the following code setup in my app.component.ts, but I’m not sure what to put in the (???) spot to force the hardware back button to send the user to the homepage:

this.platform.backButton.subscribe(() => {
if (this.router.url === '/page-3') {
   ???
  //magic code that sends the user back to the home page
} else if (this.routerOutlet && this.routerOutlet.canGoBack()) {
this.routerOutlet.pop();
}

Anyone have any thoughts into what I should be looking into? I’ve looked into Navigation Controllers, Routers, Router Outlets, Guards but haven’t found a definitive answer to my problem. Any help would be greatly appreciated. Thanks.

2

You can post your ionic info? There a problem in subscribe backbutton in @ionic/angular 4.6.2.

3

Of course:

Ionic:

   Ionic CLI                     : 5.0.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.5.0
   @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.0, (and 11 other plugins)

Utility:

   cordova-res : 0.3.0
   native-run  : 0.1.2

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.1
   NodeJS     : v10.15.3 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Mojave
   Xcode      : Xcode 10.2.1 Build version 10E1001
4

Try downgrade to @ionic/angular 4.2.2.

5

Tried that and got “No matching version found for ionic-angular@4.2.2”

Did you mean 4.2.1 or 4.4.2?

6

Sorry @plaidfox , 4.4.2.

7

I’ve downgraded my ionic/angular to 4.4.2 and tried a few options.

this.navCtrl.navigateBack(‘/home’);
this.router.navigateByUrl(‘/home’);
this.router.navigate([‘/home’]);
this.routerOutlet.pop(3);

I tried each of those lines individually and the Android Hardware back button in the emulator kicked me back to page 2 from page 3 every time instead of sending me back to the home page. Is there some code that I’m unaware of that didn’t appear in any of my Google searches that I should be using instead?

8

Can you confirm if subscribe works? With alert or console.log() on debugging app, like this:

this.platform.backButton.subscribe(() => {
         alert('subscribe works')
}
9

I’ve been using the following:

this.platform.backButton.subscribe(() => {
      if (this.router.url === '/page-3') {
        this.testAlert("Test this.routerOutlet.pop(3);");
      } else if (this.routerOutlet && this.routerOutlet.canGoBack()) {
        //this.testAlert("Test regular back button click");
        this.routerOutlet.pop();
      }
    });

async testAlert(text){
    const alert = await this.alertCtrl.create({
      header: 'Correct Page',
      message: 'I am on the /page-3 page. '+text,
    });

    await alert.present();
  }

The top alert appears every time I go back from page 3. The bottom alert (when it’s not commented out) appears every time I hit the hardware back button.

10

UPDATE:

I was finally able to solve my issue. I had to use the following code:

this.platform.backButton.subscribeWithPriority(1, () => {
      if (this.router.url.includes('xxxxx')) {
        // code
      } else {
        this.navCtrl.pop();
      }
    });

And that seems to work just fine.