Ionic 4, Angular Navigation and Android Back Button

1
votes

How do I implement Ionic 4/Angular navigation in such a way that the user CANNOT navigate backwards though their entire experience (screens) on the application?

I've ported my Ionic 2 application to Ionic 4, and feel like I've lost some critical navigation functionality.

Specifically: as a user moves forward in the application, and bounces around the different areas of my application, they are now able use the Android back button to navigate backwards through the FULL HISTORY of their previous screes. Whereas previously Ionic would STOP them moving backwards once the user hit a root page.

For example, a user would navigate from the main Welcome Page, then to the main Products page, then to Product Details page, then to the main Orders page, and then Order Details page. Then, if they start to use the Android back button, they're allowed to navigate through the entire history of screens, all the way back to the Welcome Page.

Previously, they would be force stopped at the last root/main page (e.g. the Orders page).

I don't think I had to use any application specific logic to dynamically disable the Android back on the main pages. I think the previous versions of the Ionic framework was smart enough to stop going backwards too far.

How do I implement Ionic 4/Angular navigation in such a way that the user CANNOT navigate backwards though their entire experience (screens) on the application?

I understand that ionic 4 uses angular's routing.

I am NOT asking to disable the Android back button.

2
ionic-frameworkionic2angular-ui-routerionic3ionic4
I am running into the same issue. I have the following function in my app.component.ts file and it does not work. Maybe I am on the right track and someone can show me how to tweak it to work. – jdubicki
androidBackButton() { this.platform.backButton.subscribe(() => { let url = this.router.url; switch (url) { case '/map': this.openPage('/tabs/home'); break; case '/events': this.openPage('/tabs/home'); break; case '/staff': this.openPage('/tabs/home'); break; } }); } – jdubicki

2 Answers

1
votes

This is a much simpler solution that has been working for me. Essentially you just have to tell ionic/angular when you are about to navigate to a root page and then it will stop the back button taking you past it.

import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';

...

constructor(private navCtrl: NavController, private router: Router) { }

...

this.navCtrl.setDirection('root');
this.router.navigateByUrl('/new-root-page');
0
votes

In ionic v4 this seems to work fine:

in app.component.ts inside initializeApp() function add the following:

initializeApp() {
    this.platform.ready().then(() => {
      this.platform.backButton.subscribeWithPriority(9999, () => {
        document.addEventListener('backbutton', function (event) {
          event.preventDefault();
          event.stopPropagation();
          console.log('hello');
        }, false);
      });
      // here put instructions for splashScreen, statusBar, etc.
    });
  }