I’m attempting to remove the two most recent pages from the navigation stack such that the navbar back button will take the user back to three pages. The stack is as follows:
Index 0 - CleintListpage
Index 1 - AddClentPage
Index 2 - AddLocationPage
Index 3 - ClientDetailPage
After working through index 1 and 2 the user is taken to page showing their newly entered user. Obviously I don’t want them to have to navigate back through those two pages to get back to the client list.
I’ve tried removing the two views inside the many NavController lifecycle events with strange results on all of them. The results vary from wrong pages removed to a view array with no views. When I use the setRoot method inside the onPageWillLeave the stack works as intended, the back button takes me back to index 0 and it’s the only view in the array. The issue here is rather than animating back to index 0 is just appears, after which all is well.
If I use the remove method within another method on index 3 and execute that with a button on the page it removes the correct pages from the stack, then when I tap the back button in animates smoothly to index 0. That obviously is a non-starter for production.
Cliffs notes version: How do I remove views from the navigation stack such that the navbar back button will function properly?
Assuming this flow:
ClientDetailPage > AddClentPage > AddLocationPage > Back to ClientDetailPage
From AddLocationPage
this.navCtrl.push('ClientDetailPage', params) // push in new page, increments view index
.then(() => {
/*Set the index back 2 pages but remove 3 because we don't want
ClientDetailPage on the stack twice (because we have added it above).*/
this.navCtrl.remove(this.viewCtrl.index - 2, 3);
});
Hope it saves you some time 
3 Likes
I’m sure people are probably tired of me being the resident curmudgeon, but I really dislike the advice in the previous post. It encourages what are IMHO two bad habits: magic numbers and POLA avoidance.
If I as an app developer have to futz around in such complicated ways with the navigation stack, then I am not interacting with it properly.
2 Likes
Hey @rapropos. It’s fine that you don’t like it, you don’t have to use it I personally would have liked a better way to do what I wanted but couldn’t find a better one looking at the documentation and other people’s suggestions. I felt annoyed dealing with the navigation and view controllers to get it to do what to me should be pretty straight forward. Why there isn’t a popTo() method that allows me to specify what page to pop back to seems like quite an oversight since I would imagine most people would want this functionality in most apps. I very well could be missing something obvious, but again no one really had an answer as you can see from @SDP1966’s post. There were a few other people on the forum and on stackoverflow needing to do the same thing and again, no dice.
Your post would be more useful if you posted a solution that adheres to the practices you mention that does what @SDP1966 wants to do.
1 Like
It’s difficult when people box me in by asking “how do I do X?” when I think X is a bad idea, and should be designed away. I did not see anything in OP that I felt I could say anything constructive about, because it framed the issue in such a narrow way.
My answer addresses a workflow and may or may not work for this person depending on whether I’ve interpreted what they are trying to do correctly (and I agree, if you take it at face value it doesn’t make too much sense).
Essentially, the user progresses through 2 pages from the original page to complete the workflow (original page > search > view as an example). The finish action on the view page then returns them to the original page with the selected customer. Those 2 middle pages are not needed in the stack anymore. They affect the back button on Android and you don’t want them there. Further more, you may also not want to go back to the root because the originating page is a sub page. That’s what my solution solves. If there’s a better way, I’d love to know it.
My code should also say ClientDetailPage instead of OriginalPage which I’ll correct since that can confuse things.
I guess this is where I would like to find common ground, and I often try to do so by answering such questions with some variant of “I think this is a bad idea, but if you insist, …”.
I think in a situation where we have “wizard-y” sorts of "page"s that aren’t intended to be part of a nav stack (which I think is probably the case here), probably the best course of action is to present them as modals. Would that work for you?
For my case, modals aren’t the best choice for the overall flow of the application. The design would need to change (and I believe not for the better) or you would end up with a modal within a modal which isn’t a great experience.
Hey @lisatassone. Can you help me how to achieve this functionality in ionic 5?