Prevent pushing of page when we are already on that page

Ionic Framework ionic-v3
1

unnecessary stuffs: I am new to Ionic, like super-new, and I am going through tutorials, forums, Q&A and blogs as well to learn every bit I might need, I would have scourged through the docs to find an answer but the problem is that I am trying to rush it and also that I wanted post my first topic here!

I have an ion-menu that is in the app.html, there are links that has the (click)='openPage("some-page")', it works beautifully but the problem is when we open the menu and press on a link that is already active stacks that pages once again, and it can go on like that forever.

in app.component.ts I’ve:

openPage( pageName: string ) {
    this.nav.push( pageName );
}

I have in my head that how this can be achieved (for e.g do a if / else check to see if the current page is same as the passed page) but I am not very pro with Ionic / Angular for now and would love to take some help from folks who are familiar with it and have better idea of the best practices to do this.

2

You could change it to something like this:

  openPage(pageName: string) {
    if (this.navCtrl.getActive().name !== pageName) {
      this.navCtrl.push(pageName);
    }
  }

This will retrieve the name of the active page and compare it with the pagename you want to push!

3

I’d imagine that that code breaks in production mode.

1 Like
4

Do you need navigation history? If not, you could clear the nav stack every time you push a new page.

5

Thanks everyone!

I figured out that since the user is getting on to that page from a place where the link to that page is available again, nav.push was not the ideal option, so I am now using nav.setRoot which does the same thing as disabling the history stack I guess and I added a back button to the toolbar manually in the template to make sure it goes to a specific page when back is tapped.