How to check for a specific page on NavController's view stack?

Ionic Framework ionic-v3
1

I need to avoid repeated pages in the view stack.

If the app is pushing another page of a type which already is on the stack, first it need to pop pages from the stack until remove the first occurrence of this given type.

For example, given the following state of a view stack:

^ Purchase
| Purchases
| User
| Users
| Search

I want to push the page User, when the user clicks into a button in the page Purchases. The stack must to get in the following state:

^ User
| Users
| Search

Note that I can go to the User Page from several ways. For example, they can access the user from the page Users or from the UserEventsNotificationsPage. Also I can access Purchase from a global purchase list. So I don’t know if there’s a User page on the stack.

How could I check the existence of a given page on the view stack?

2

You can use navCtrl.getViews() though I don’t think this is a good idea to try to control.

The point of NavController and the Navigation Stack is that you dont need to worry about things like this, and you can just push components on to the stack without worrying about previous views.

4 Likes
3

My views have “ciclical references” to each other like pages in a Website. Because the same codebase is being used to develop a desktop application. This way the user can add a unlimited number of views in the stack. So, go back to the main view can be a very very long and tedious task…

4

Here’s how you can get the names of pages that are currently on the stack:

  for ( let i=0; i < this.navCtrl.length(); i++ )
      {
          let v = this.navCtrl.getViews()[i];
          console.log(v.component.name);
        
      }
2 Likes
5

So I’m trying to do something simlar to this. (If you don’t do this then each time you go to a menu item it puts a new one on the stack creates duplicates which I find is silly and surprised it doesn’t handle it).
The problem I’m having is when I do a --prod build, the name has been lost. For some reason 5 of my menu items all have name = “n”
One of them is blank so that one keeps you on the same screen.

What happens is you click a menu item and it takes you to it, you click the same menu item you are taken back to home.

Any way to fix this?

6

It’s not broken.

When you call nav.push(), something new goes on the stack. If you don’t want that to happen, don’t call nav.push(). Use setRoot() instead, for example.

As you have discovered, anything that depends on class names will break in production.

7

Those are the only two options?
So the user clicks a menu, you push it to the stack. What should you do when the user clicks the same menu option?
It pushes it to the stack? How is that the correct functionality of nav?
Now you have multiple copies of the same page!

We originally were setting everything to root, but then you have the back button problem. Any root page you don’t go back, you close the app (unless you handle that).

Also, why does nav have values like name that work differently in production? How do I know which values get broken with a production build?

8

Got it working just comparing components. Not as easy of compare I would think.

for(let r=0; viewStackList.length > r; r++)
      {
        let viewStack = viewStackList[r];

        if(page.component === viewStack.component)
        {//Already have the page in my stack, just go back to it.
            this.nav.popTo(r);
        }
      }
9

There are situations where that makes perfect sense. Perhaps the same page looks to a user completely different if it has different NavParams, in which case having multiple instances of it on the stack could be desired.

They work the same as long as you don’t depend on class names.

I would not rely on any class or function names.