How to get current page from Navigation in ionic 2

Question

I am new to Ionic2, and I am trying to build dynamic tabs based on current menu selection. I am just wondering how can I get current page using navigation controller.

...
export class TabsPage {
  constructor(navParams: NavParams,navCtrl:NavController) {
    //here I want to get current page
 }
}
...

From api documentation I feel getActiveChildNav() or getActive() will give me the current page, but I have no knowledge on ViewController/Nav.

Any help will be appreciated. Thanks in advance.

Audiogenic

Answer 1

Full example:

import { NavController } from 'ionic-angular';

export class Page {

  constructor(public navCtrl:NavController) {
  }

  (...)

  getActivePage(): string {
    return this.navCtrl.getActive().name;
  }
}

Method to get current page name:

this.navCtrl.getActive().name

More details here

Camlet

this helped me a lot to prevent navCtrl to go (and initialize all the stuff in it!) to a Page where we already are! Especially in conjunction when subscribing to an observer multiple times, which ends up in an error! – Law

I don't think this method is recommended at all because production minify file names – Toga

sir i tried but its not working in release build its return every time "l" in log can you help me this? – Devi

Answer 2

OMG! This Really Helped mate, Tons of Thanks! @Deivide I have been stuck for 1 Month, Your answer saved me. :) Thanks!

if(navCtrl.getActive().component === DashboardPage){
    this.showAlert();
}
else
{
    this.navCtrl.pop();    
}

Bani

@Cozzbie it wasn't working for me either, turns out the value cant be accessed in the constructor. Only in functions executed after page load. Hope that helps. – Paint

Answer 3

My team had to build a separate custom shared menu bar, that would be shared and displayed with most pages. From inside of this menu component.ts calling this.navCtrl.getActive().name returns the previous page name. We were able to get the current page name in this case using:

ngAfterViewInit() {
 let currentPage = this.app.getActiveNav().getViews()[0].name;
 console.log('current page is: ', currentPage);
}

Impertinence

Answer 4

this.navCtrl.getActive().name != TheComponent.name or this.navCtrl.getActive().component !== TheComponent

is also possible

Lanitalank

Answer 5

navCtrl.getActive() seems to be buggy in certain circumstances, because it returns the wrong ViewController if .setRoot was just used or if .pop was just used, whereas navCtrl.getActive() seems to return the correct ViewController if .push was used.

Use the viewController emitted by the viewDidEnter Observable instead of using navCtrl.getActive() to get the correct active ViewController, like so:

navCtrl.viewDidEnter.subscribe(item=> {
          const viewController = item as ViewController;
          const n = viewController.name;
          console.log('active page: ' + n);
      });

I have tested this inside the viewDidEnter subscription, don't know about other lifecycle events ..

Ermentrude

@Cleber Lopes de Albuquerque ' s answer works for .setRoot is this case. – Parrett

Answer 6

Old post. But this is how I get current page name both in dev and prod

this.appCtrl.getActiveNav().getActive().id

Subsume

Answer 7

Instead of

...
...

//In debug mode alert value is 'HomePage'
//In production/ signed apk alert value is 'n'

alert(activeView.component.name);
if (activeView.component.name === 'HomePage') {
...
...

Use this

...
...

//In debug mode alert value is 'HomePage'
//In production/ signed apk alert value is 'HomePage'

alert(activeView.id);
if (activeView.id === 'HomePage') {
...
...

Source Link

Wycliffite

Answer 8

This router.url is available from angular version 4+ to track current page from navigation and also can use for ionic/angular based projects

import { Router} from '@angular/router';

constructor(public router: Router){
console.log(router.url);
}

Bugbear

Answer 9

You can use getActive to get active ViewController. The ViewController has component and its the instance of current view. The issue is the comparsion method. I've came up to solution with settings some field like id:string for all my Page components and then compare them. Unfortunately simple checking function name so getActive().component.name will break after minification.

Coddle

You're right, and if you use the component comparison getActive().component === ComponentName? It worked for me. – Epigastrium

But it wont work after code minification as the namings will be changed. – Coddle

This method compares the component itself rather than its name. As if we were to compare the following: x = y = function () {}; x === y; Do you understand? – Epigastrium

Yep. Maybe im wrong but such approach breaks for me after minification. I'll try it again in a free time and check. – Coddle