Removing previous page from Nav stack

Ionic Framework ionic-v3
1

Hi,

In my app I have three pages

page1, page2, page3

From page1 I used nav.push(page2) to come to page2.

In page2 on click of a button I want to move to page3 and then remove page2 from the nav stack.
So that the nav stack is page1 =>page3 and when the user clicks back on page3 it comes to page1.

My current working solution is to do this.

navCtrl.pop().then(()=>{
navCtrl.push(page3);
})

The only problem is the that the transition goes like this page2 => page1 =>page3. I would not have bothered about this if this was not visible. But this transition is visible.

Any other variation I tried either breaks the nav in the the page or disables the back button on the navBar thats created using menuToggle.

Can some one suggest a way to effectively deal with this requirement.

Cheers,
SD

2 Likes
2

You can use remove.

this.navCtrl.push(page3).then(() => {
  let index = 1;
  this.navCtrl.remove(index);
});
5 Likes
3

Hi @pwespi,

The problem with that approach is that I don’t know my index number. And navCtrl.getPrevious or navCtrl.getViews fails in the then() because the navCtrl is still transitioning.

I attempted to do this in the Page3’s ionViewWillEnter().

if(this.navCtrl.getPrevious().name == "Page2"){
      console.log("Remove Page2");
      this.navCtrl.remove(this.navCtrl.getPrevious().index);
    }

The problem is that this also breaks my backbutton created using ion-toggel in my nav bar on Page3. In fact this breaks all links in Page3.

Any other solutions that’s available? or a Working code.

Cheers,

SD

4

Would that work?

this.navCtrl.push(AboutPage).then(() => {
  let index = this.navCtrl.length()-2;
  this.navCtrl.remove(index);
});
2 Likes
5

Hey @pwespi,

Unfortunately it did not.

All links break. I think the problem is the same.

I am thinking of another way. Use a ViewCtrl Array and loop through and remove the page2 and add page3. Then use setPages(). I will let you know soon.

I am also actually considering a redesign of my form components since my page 2 is forms add/edit data and page 3 is display form data.

I am planning to either use a modal instead of page 2 or combine pages 2 and 3.

But that is probably for the next release.

I will for now stick to viewCtrl.dismiss() or navCtrl.pop() on page 2 followed by navCtrl.push().

Cheers,
SD

6 
this.navCtrl.push(urpage)
.then(() => {
  const startIndex = this.navCtrl.getActive().index - 2;
  this.navCtrl.remove(startIndex, 2);
});
1 Like
7

Hello,

Any solutions to this ? I encouter the same problem.

I push a parameter page from a popover, i want that the user go back to the root page when he press the backButton.

What i want to do is :

rootpage->popover->parampage->rootpage
and
rootpage->BleConnectedDevicePage->popover->parampage->rootpage

I tried this :

 pushParamsPage(){
    this.viewCtrl.dismiss('popover').then(() => {
      this.app.getRootNav().push('ParamPage').then(() => {
        this.navCtrl.remove((this.navCtrl.getActive().index)-1, 1);
      }); 
    });
  }

But in popover, this.navCtrl.getActive() is undefined…

Then i tried this :

pushParamsPage(){
    if ( this.navCtrl.canGoBack()) {
      console.log('can go back true');
    this.viewCtrl.dismiss('popover').then(() => {
      this.app.getRootNav().push('ParamPage').then(() => {
        this.navCtrl.remove(1, 1);
      }); //we push from RootPage and not from PopoverNav, allow to use BackButton 
    });
    }
    else {
      console.log('can go back false');
      this.viewCtrl.dismiss('popover').then(() => {
        this.app.getRootNav().push('ParamPage');
      }); 
    }
  }

But this.navCtrl.canGoBack() is false even if i’m not in the rootpage… Don’t understand why…

I use this before finding a solution, but we see the transition :

ionViewCanLeave() {

  this.navCtrl.popToRoot();

 }
8

Late on the discussion but it worked for me…

let currentIndex = this.navController.getActive().index;
this.navController.push(DestinationPage).then(() => {
    this.navController.remove(currentIndex);
});
13 Likes
9

Your solution works like a charm :grinning:

10

Hi,

I am using Ionic4 , But I don’t see navController features what it have in the Ionic3 NavController. How can we removing previous page from Nav Stack.

Could please anyone help me on this.

1 Like
11

Ionic 4 nav uses angular router. Refer

https://www.joshmorony.com/using-angular-routing-with-ionic-4/

That explains the changes really well. Also refer ionic 4 docs and angular routing docs.

12

Thanks SD1985 for replying. I don’t find any solutions in that link.

NavController uses angular routing procedure but we can’t remove previous page from nav stack using below methods.

this.navCtrl.navigateForward(’/route’);

this.navCtrl.navigateBack(’/route’);

this.navCtrl.navigateRoot(’/route’);

it is appending page in the nav Stack.

13

Have you tried the following?

this.navCtrl.navigateForward("", { replaceUrl: true });

Since Ionic 4 uses Angular router, the replaceUrl boolean is an Angular option.

14 
            this.navCtrl.remove(0, this.navCtrl.length() - 1);
            this.navCtrl.setRoot(xptoPage);