Ionic 2 Angular NavController, pop back to second

Question

I have the following navigation-case:

Home -> navCtrl.push(SearchPage) -> navCtrl.push(ResultPage)

or

Home -> navCtrl.push(SearchPage) -> navCtrl.push(ResultPage) -> navCtrl.push(DetailPage)

I want to navigate back to SearchPage. In first case, there is no problem, I can use

this.navCtrl.pop()

But, in second case, I try to use

this.navCtrl.popTo(SearchPage)

and this does not work as expected. Ionic navigates only one page back in stack. I know there is an issue with popTo() (https://github.com/driftyco/ionic/issues/6513)

How can I solve this problem?

Answer 1

In my case it worked liked this

import { NavController, NavParams } from 'ionic-angular';

export class MyComponent {
    ...
    constructor(private navParams:NavParams, private navCtrl:NavController){
        //If I get the paramater, I know I have to "skip" last view
        let condition = this.navParams.get("condition");
        if (condition){
            this.navCtrl.removeView(this.navCtrl.last());
        }
    }
    ...
}

So, whether you go back with the soft/hard button or just pop() manually, the previous view will be skipped.

Answer 2

You can do this by modifying the navigation controller stack using insertPage method.

 this.nav.insertPages(0, [{page: your_home_page}, {page: SearchPage}]);
 this.nav.pop();

Here 0 refers to the position where you want to insert your page. In above code, 0 will be your home page and 1 will be your search page. Use this command in your DetailPage to navigation pop to SearchPage.

For more information check http://ionicframework.com/docs/v2/api/navigation/NavController/

Answer 3

I answered a similar question on here and it seems to apply for yours too. Since I'm lazy loading the modules, popTo() only seems to work when I pass an object from the NavController.getViews() array. With that said, you can try something like this:

let targetView = this._navCtrl.getViews().filter(view=> view.id == 'MyAwesomePage')
targetView.length ? this._navCtrl.popTo(targetView[0]) : this._navCtrl.pop()

Or something more verbose like this:

let index: number;
let views: any[] = this._navCtrl.getViews()
let found: boolean = views.some((view, i) =>{
  index = i
  return (view.id == 'MyAwesomePage')
})
found ? this._navCtrl.popTo(views[index]) : this._navCtrl.pop()

If you want to change the order, you may getViews().reverse().filter() or views.reverse().some(). This is with Ionic 3 and ES5's Array.some()

Answer 4

ok, found a solution. It looks like it works ... at least for the moment

this.navCtrl
        .push(SearchPage)
        .then(() => {

            const index = this.viewCtrl.index;

            for(let i = index; i > 0; i--){
                this.navCtrl.remove(i);
            }

        });

Answer 5

Try this! Once you are in the DetailPage, do:

this.navCtrl.remove(2,1); // This will remove the 'ResultPage' from stack.
this.navCtrl.pop();  // This will pop the 'DetailPage', and take you to 'SearchPage'

Answer 6

I also came across to same problem and found the solution, it is similar to the accepted answer but without loop and bit more details so I hope this helps someone to understand it.

So here's the flow:

Home -> navCtrl.push(SearchPage) -> navCtrl.push(ResultPage) -> navCtrl.push(DetailPage)

And here are the respective index:

Home: 0
SearchPage: 1
ResultPage: 2 
DetailPage: 3

If you want to go back to SearchPage from the DetailPage, you basically want to remove ResultPage from the stack when you push DetailPage.

So try this code on the ResultPage when you push DetailPage:

// First get the index of ResultPage, it should return 2.
let resultIndex = this.navCtrl.last().index; 

// Push DetailPage.
this.navCtrl.push(DetailPage).then(() => {
  // Once it's pushed, this block is called and now we can remove the ResultPage from the stack.
  this.navCtrl.remove(resultIndex, 1); 
  // second parameter is optional and defaults to 1, if you want to remove more pages from stack start with the bottom most index you want to remove and pass number of pages you want to remove starting from the given index. 

});

Hope this helps someone somewhere.