How to get current page name?

I think this is a really bad idea, because it will be brittle in the face of minimization. You will see things working great in development mode and break in production.

7 Likes

@rapropos
Ok - do you have an alternative for determining the name of the active view?

Or is this about the use of console.log?

No, I don’t have an alternative for determining the name of the active view. The initial question was “I need to close the application when the user clicks the back button and a certain page is active”. What I would do in that case would be to register a specific back button handler when that page becomes active and unregister it when it becomes inactive.

Gotchya - would you mind elaborating on why it is a bad practice?

In my case, I wanted to check what the current view was for a custom menu component that opens in a modal.

If the modal opens on a view - say the home page - and the user then tries to navigate to the home page (the page they are already on) - I’d rather just close the menu rather than going to nav.setRoot(HomePage);

But to do this, I would need a way to determine the current view. Accessing view.control.name was the way I found to check what the current view was.

1 Like

Like I mentioned in my earlier comment, minimizers/uglifiers change class and function names out from underneath you, so if you’re comparing names of things that are internally dependent on constructor names to string constants, it’ll work great until the minimizer gets invoked in production mode and then you’ll magically be hosed running on the device.

2 Likes

Thanks - I’ve made adjustments for that.

Here’s a helpful discussion Get current page/ view name in RC0 returns “t”

So if your goal is to determine what the current view is (for making a navigation decision)

The clean way to do it is:
let view = this.nav.getActive();
if ( view.instance instanceof MyPage ){
//You’re already on this page
}

3 Likes

console.log(view.component.name);

It is returning t always on android and ios device.

2 Likes

That is because of minification.

See this:
https://forum.ionicframework.com/t/get-current-page-view-name-in-rc0-returns-t/65905/288?source_topic_id=52993

If you need to determine what page you are on do something like this:

import MyPage from ‘pages/myPage/myPage’;

let view = this.nav.getActive();
if ( view.instance instanceof MyPage ){
//You’re already on this page
}

Use instanceof to match the class, instead of checking for a string name.

3 Likes

This way using instaceof is not working anymore, any help? Thanks!

As far as I can tell, it is still working for me running Ionic 2.0.0 - care to explain how it is not working?

In production is not working for me.

1 Like

try this link - working for me

I am using a sidemenu template for my project. The sidemenu code is written inside app.component.ts. I am applying a border-left color using [ngStyle], in there I am calling a function, which checks following code
if (this.rootPage.name === page.component.name) {
return true;
}
return false;

here I am passing a component which is having a name attribute that is holding a component.
Everything is working fine except one scenario
I am using a icon, clicking which I am directly coming to home page (If the rootPage was not set to be Home from before), then I am not able to apply the border-color on the home button in sidemenu.

Not able to use ViewController inside app.component.ts.

I use the following code in my app.component.ts to get the current page name:

if (this.nav.getActive().name == 'Login') {

Here Login is the name of my class as defined in the ts file of the current page. Hope you find this useful…

The problem with your solution is when you build your app in production the page name is uglify.
So it doesn’t work anymore…

1 Like

Thanks for pointing that out @5im0n. I never thought about that :slight_smile:

Shouldn’t
this.nav.getActive().component.name
do the trick?
I think .component.name is not uglifyed but feel free to correct me if I’m wrong :slight_smile:

Nope @MarvinS , it’s exactly the same

I use this solution to solve the minification problem.

  public isPageActive(pageName: string): boolean {
      return this.nav.getActive().id === pageName || this.nav.getActive().name === pageName;
    }

But there is another issue: On desktop when you press F5 to reload the page, the id of the active page is equal to the segment of the @IonicPage

3 Likes

This works for me in production:

export interface PageInterface {
  title: string;
  component: any;
  icon: string;
}

@Component({
  selector: 'page-root',
  templateUrl: 'app.html'
})
export class myApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any = HomePage;

  public pages: PageInterface[] = [
    {
      title: 'Home',
      component: HomePage,
      icon: 'home'
    }
]

isActive(page: PageInterface) {
    if (this.nav.getActive() && this.nav.getActive().instance instanceof page.component) {
      return 'secondary';
    }
    return 'primary';
  }

Where the side menu list in the view will look something like this:

<ion-list>
        <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
          <ion-icon [name]="p.icon" [color]="isActive(p)" item-left></ion-icon>
          {{p.title}}
        </button>
</ion-list>
3 Likes