Manipulate navigation history for mobile app

Ionic Framework
1

I’m working on an app which has these pages:
Select procedure => Select item => procedure 1 form
Select procedure => Select item => procedure 2 form

When the user completes a procedure, if there are other pending procedures to complete, there’s an option to go directly to that procedure form. Like this:

Select procedure => Select item => procedure 1 form => procedure 2 form

However, I don’t want the user to go back to the previous procedure, because it’s already completed. If he taps back, I want the app to send him back to the Select item screen. I need to remove the last procedure from the navigation Stack.

Now I’m not really looking for advice about how manipulating the history stack is bad design, this is a very specific case in which I really need to do it. This was possible in Ionic 3, you could freely remove pages from the stack. However, in Ionic 4, using Angular routing, I couldn’t find a way to do it. The stack has to be stored somewhere, I just don’t know how to access it. There’s also extra parameters for the Router.Navigate() function that could help me (more specifically, replaceUrl), but they seem to be ignored when using the app on a mobile device. I’ve heard it’s a bug that was fixed in a nighty build, but I don’t want to risk the project with unstable versions, so I’m looking for alternatives. Any ideas?

1 Like
2

Can you share the code you are using to move from “procedure 1 form” to “procedure 2 form”?

3

I don’t have access to the code right now, but there wasn’t anything fancy there. I just check if there are any remaining procedures to complete, and if there are, I show a dialog to let the user decide if he wants to move to the next. If he clicks “continue” I just do:

this.router.navigate([nextProcedure.url], { replaceUrl: true } );

Both “replaceUrl” and “skipLocationChange” extra parameters are ignored by the default Ionic back button. The only way to make them work is to use location.back() instead, but there’s a problem. Angular “back” doesn’t distinguish between a page and a tab, so if I’m in Tab_B and use location.back(), it will move to Tab_A instead of the previous page. All procedure pages are composed of two tabs, so I can’t use location.back() there. I need to manipulate the navigation stack Ionic uses internally.

4

I was interested in whether you were going through Ionic’s NavController or not. If you don’t get any better answers, you might consider using Platform’s backButton emitter to hijack back button handling and do it yourself. That might end up being more futureproof than trying to futz around with the navigation stack, which at a cursory glance doesn’t appear to be doing anything Ionic-specific, but is rather just a veneer over Angular’s Location.back.

1 Like
5

So you suggest I subscribe to the Platform’s backButton event, and manually override the page I should go back to (with navigateBack) when I need to skip the previous procedures. Sounds like a good idea, although a bit less practical way to mess with the stack compared to the navController functions we had in Ionic 3, but I guess it should work. I’ll try that, thanks rapropos.