Ionic3 prevent same page from loading

Ionic Framework ionic-v3
1

With Ionic3 you open a page like:
this.nav.push("somepage");

I am trying to prevent an already opened page from opening again from the Sidemenu.
Using this.nav.getActive() returns an object with a value ‘name’ set as the exported class name.
So in this example, this.nav.getActive().name returns “SomePage” - not “somepage”.

My workaround is to use toLowerCase to find a match and deal with it. This however would depend on setting the IonicPage decorator to the Class Name toLowerCase.

 if(this.nav.getActive().name.toLowerCase() == page.component){
      console.log("You are already here");
    }else{
      this.nav.setRoot(page.component);
      this.menuCtrl.close();
    }

This works but is there a better way?

I guess optionally I could use Capitalization on my IonicPage decorator but still hacky.

2

Wouldn’t it be more correct to use this.nav.push('SomePage') anyway? Or are you manually overriding the ‘name’ to something different than the class name?

3

This looks like a good bug catch. See if it’s not already reported and if it isn’t, you can file a bug report for that or even fix it yourself and have a piece of your code making ionic better for all of us!

That being said, just as @Sujan12 said, it’s best to stick with the conventions and use proper CamelCase naming, with capital first letter for classes.

4

I guess because I have used generator a lot to create pages, a lot of my pages are named with the ‘Page’ on the end.
Like: HomePage
But I prefer it be referred to as ‘home’. This is most visually pleasing in a browser app.

I could rename all my pages etc… but thought it would be good for getActive to return the IonicPage decorator value as well as the class name.
Or some other way.

5

Hmm, didn’t really think it was a bug but more of a request for a better option.

6

Ah ok I get it, I think the generator behaviour also changed from Ionic 2 to Ionic 3 to not include the “Page” in the class names any more.

Now the question is if getActive().name should actually return the class name or the set name of an IonicPage to know if this may really be a bug as @maninak said.

7

If you have a Page’s segment declared as "somePage" and this.nav.getActive().name returns "SomePage", then it looks like a bug.

If you have a Page’s segment declared as "somePage" andthis.nav.push('SomePage') works, it may be a bug, or it isn’t because the ionic team wants the NavController to handle it being case-agnostic (which is kinda weird if that’s the case).

8

There also is http://ionicframework.com/docs/api/navigation/NavController/#isActive, maybe this works better?

(Several people on StackOverflow mentioned that the getActive().name comparison will break when minifying your application - but as you’re not hardcoding…)

9

Or now that I think of it, the NavController’s string input (and output, depending on the function) is referencing the IonicPage’s class name instead of the IonicPage’s segment, which makes more sense.

EDIT: nope it’s referencing the name property of the IonicPage decorator which defaults to a string value equal to the name of the class to which the decorator corresponds (if the property name is not explicitly defined).

10

isActive returns false when using page.component.

11

I thought so too, that it’s reference to the Class Name is intentional - not a bug.
But, getting the segment name in the object returned would be handy, in Ionic3.

1 Like
12

I would go outside the box here and disable the associated menu item when the page enters and enable it when it leaves. Avoids the whole issue and arguably makes more sense to the user.

1 Like
13

I like it.
Will give it a whirl, thanks.