Ionic 4: Prevent backbutton from closing page

Ionic Framework
1

Hi,

I’m searching for a way to disable the hardware back button on certain pages, i.e. on a “loading” page; I know about the existence of

this.platform.backButton.subscribe(() => {
  // do something here
});

, but this allows only for performing an action once the back button is pressed, but I don’t see how to cancel the “nav.pop()” action. Do you know how to achieve this?

2

I just realize and face the exact same problem, did you find any solution?

3

I don’t think it’s possible, I have opened a feature request: https://github.com/ionic-team/ionic/issues/15820

4

I think what you would want to do here is use the lifecycle hook ionViewCanLeave() inside your loading page to determine if you can leave the view. More lifecycle hooks can be found here: https://ionicframework.com/docs/api/navigation/NavController/#lifecycle-events

6

Oh you are suggesting that was a workaround, I should in addition to subscribing to the back button, I should implement an ionViewCanLeave() in order to avoid the automatic back navigation?

That’s a good idea :+1: I should try…

7

Except that there isn’t any ionViewCanLeave in Ionic v4 right?

8

Ok so I could confirm what I said above, there isn’t a ionViewCanLeave in v4, therefore you could not add a rule to tells the back action to be or not to be executed, but feel free to correct me if that’s wrong, that would be cool

In the meantime I may I have found, at least for my app, an ugly workaround. I want to override the back action because in my page there is a slider, so when the user click back, I don’t want to navigate back but I want to navigate to previous slide. The to so I subscribe to the platform.backButton in order to call slider.slidePrev()

Then I have to solve that problem of auto navigation, so the trick which seems to work, is to add state in the history, therefor, the automatic back action (see goBack or the ion-router https://github.com/ionic-team/ionic/blob/7d50305b7f6c48392dd278b55824e4c712890214/core/src/components/router/router.tsx) will go back in the navigation history by first popping the states I added

Looks like

<ion-slides (ionSlideNextEnd)="pushHistoryState()">

async pushHistoryState() {
        const sliderIndex: number = await this.slider.getActiveIndex();
        history.pushState({newAd: sliderIndex}, document.title);
    }
}

also of course you should do the same for the action which would slide to previous slide by poping the state

 history.back(1);
9

Would love to see a “real” non hacky solution for this. I ran into this issue 5 minutes ago trying to show a pop up going like “Are you sure you dont want to save, bro ?”. Thought i could override it by putting a (tap) on the ion-back-button but no sigar

10

I would like to have a real non hacky solution and I like the idea you posted in the GitHub issue :+1:

In the meantime, I could confirm that the above ugly hack works fine. Implemented and tested on my Android phone

11

There will be a new feature for that purpose in the next Ionic v4 version, @manucorporat implemented a new feature which will be called subscribeWithPriority (see code https://github.com/ionic-team/ionic/commit/6a5aec8b5d76280ced5e8bb8fd9ea6fe75fe6795) :+1:

so to follow OP first post:

this.platform.backButton.subscribeWithPriority(() => {
    // do something here
});

cool

12

I wanted to prevent back button event from propagation. To do this I will update your snippet as

this.platform.backButton.subscribeWithPriority(() => {
    // do nothing here
});
2 Likes