Removing previous page from Nav stack


#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

You can use remove.

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

#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);
});

#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);
});

#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);
});

#9

Your solution works like a charm :grinning: