Ionic2 - 检查页面是否处于活动状态

Question

How can I check if a ionic2 page is active?

For example I want to hide a button if a page is active:

<button primary [hidden]="isActive('actualPageName')">
     Should be hidden
</button>

Answer 1

IONIC 2 & 3: Because of the uglification you cannot use pagename for production.

I check the active page by looking if the last page on the controller stack is of the instance of the page:

import { NavController } from 'ionic-angular';
import { myPage } from '../../pages/my/my';
...
constructor(public navCtrl: NavController) {}
...
let active = this.navCtrl.last().instance instanceof MyPage;

IONIC 4: Routing is changed. This looks like the new way:

import { Router } from '@angular/router';
...
constructor(public router: Router) {}
...
let active =  this.router.isActive('mypage', false)

Answer 2

You can retrieve the active page and check its name:

public isActive(pageName: string): boolean {
   return this.navCtrl.getActive().name === pageName);
}

UPDATE

In the comments you can see some users that claim this solution is not working for them due to the Uglify process. It sounds reasonable, but I still found the solution seems to work. I've compiled an APK with this code using this command:

ionic cordova build android --prod --release

During compilation you can see:

...
[13:00:41]  uglifyjs started ... 
[13:00:43]  sass finished in 2.45 s 
[13:00:43]  cleancss started ... 
[13:00:46]  cleancss finished in 3.05 s 
[13:00:57]  uglifyjs finished in 16.27 s
...

Then, when I run that app in the Android emulator I got the right page name using this.navCtrl.getActive().name .

I must say I've not tested it with a signed application in a real device.

May be Android or the emulator is not affected, may be the problem described by those users is solved in recent releases, may be I'm doing something wrong. Because I don't know the response to this questions I maintain my answer but I've added this info. Please, if you know more about this comment it instead of just ignoring or donwvoting this answer. If this answer is proven wrong I'll happily modify or delete it.

Answer 3

Update to the @sanzante answers. You can retrieve an active page and check it's name as follows.

public isActive(pageName: string): boolean {
   return this.navCtrl.getActive().id === pageName);
}

It will work for the --prod build version as well.

ionic cordova build android --prod --release

Answer 4

http://ionicframework.com/docs/v2/api/navigation/NavController/#isActive

Read the doc above. Import NavController to your Page, then you can inject NavController into your Page using typescript:

constructor(public nav: NavController) {}

or using ES6:

constructor(nav: NavController) {
    this.nav = nav;
}

After all that, you can call this.nav.getActive() to see the current Page or call this.nav.isActive('MyPage') to check if you are on MyPage

Edit: the ES6 version isn't truly ES6 but should work for Ionic2

Answer 5

Old question but here are my 2 cents.

I believe a more cleaner solution would be to make use of the id property in the NavOptions, a draw back is that you need to pay attention to the id's you assign to avoid an id collision:

You instantiate the component like this:

this.navCtrl.push(MyComponent, navParams, { id: 'my-component-1' });

Then you can simply check it like this:

this.navCtrl.getActive(true).id === 'my-component-1'

Answer 6

If you want to check for different Pages component this.navCtrl.last().instance instanceof MyPage; should be sufficient if you want to compare between two pages instance of the same component the only option i found was use a ref to the container and next use the getBoundingClientRect function because the width of not visible pages is 0 this maybe can help to someone.

this.content.nativeElement.getBoundingClientRect().width > 0

Answer 7

I track it, a little less elegant but effective and simpler:

ionViewWillEnter(){
    this.isActualView=true;
}

ionViewWillLeave(){
    this.isActualView=false;
}

...

if(this.isActualView)...//here I know I am in the actual view or not

Answer 8

Updated answer for 2021 -- If you are using Angular for your Ionic project, this is how you can achieve the answer to the question:

<div routerLink="/tabs/tab1" [routerLinkActive]="'is-active'" #discover>
  <img [src]="discover.classList[0] == 'is-active' ? 'assets/tabs/explore-orange.png' : 'assets/tabs/explore-white.png'" />
  <ion-label>Home</ion-label>
</div>

[routerLinkActive]="'is-active'" will add the is-active class to that div when that route is active.