What is the right way to use hardware back button in Ionic 4?

Question

i'm creating a ionic 4 app, and i want to use the device's hardware back-button to return at specific page

i'd checked in this page Handling hardware back button in Ionic3 Vs Ionic4 to create my code but it doesn't work

detallesusuario.page.ts

    import { Subscription } from 'rxjs';
    import { Component, OnInit, AfterViewInit, QueryList, ViewChildren}from '@angular/core';
    import { Platform, IonRouterOutlet } from '@ionic/angular';
    import { Router } from '@angular/router';
    @Component({
      selector: 'app-detallesusuario',
      templateUrl: './detallesusuario.page.html',
      styleUrls: ['./detallesusuario.page.scss'],
      })
export class DetallesusuarioPage implements OnInit, AfterViewInit {
  @ViewChildren(IonRouterOutlet) routerOutlets: QueryList<IonRouterOutlet> ;
  sub:Subscription
  constructor(private platform:Platform, private ruta:Router) { }
  ngAfterViewInit(): void {
    this.backButtonEvent();
  }

  ngOnInit() {
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
  backButtonEvent() {
    let u=0;
    this.sub=this.platform.backButton.subscribeWithPriority(0, () => {
      this.routerOutlets.forEach(async(outlet: IonRouterOutlet) => {
                  console.log('paso');
                  await this.ruta.navigate(['menu/inicio/tabs/tab1']);

      });
    });
  }
}

When i deploy a app to a device, the button return to the previous page instead to go at the specific page

score 0 · Answer 1 · answered Jul 20 '19 at 05:30

The hardware back button handling code is found in:

https://github.com/ionic-team/ionic/blob/master/core/src/utils/hardware-back-button.ts#L20

And that is exposed by the platform using platform.backButton:

It looks to me like you are using it correctly. I found this article showing the same technique, and also another forum post.

What looks strange to me is why you are getting IonRouterOutlet involved.

Have you tried it just using the router directly?

  backButtonEvent() {
    this.sub=this.platform.backButton.subscribeWithPriority(0, () => {
      console.log('paso');
      await this.ruta.navigate(['menu/inicio/tabs/tab1']);
    });
  }

Note: I'm assuming your choice of ngAfterViewInit make sense - I haven't double checked this.

However, you should also probably take a detailed look at this issue as it seems there are tons of problems with the hardware back button:

https://github.com/ionic-team/ionic/issues/16611

What is the right way to use hardware back button in Ionic 4?

1 Answers1