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

Question

如何检查 ionic2 页面是否处于活动状态？

例如，如果页面处于活动状态，我想隐藏一个按钮：

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

Answer 1

IONIC 2 & 3：由于丑化，您不能使用 pagename 进行生产。

我通过查看控制器堆栈上的最后一页是否属于该页面的实例来检查活动页面：

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

离子 4：路由已更改。 这看起来像新的方式：

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

Answer 2

您可以检索活动页面并检查其名称：

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

更新

在评论中，您可以看到一些用户声称由于 Uglify 过程，此解决方案对他们不起作用。 这听起来很合理，但我仍然发现解决方案似乎有效。 我已经使用以下命令使用此代码编译了一个 APK：

ionic cordova build android --prod --release

在编译过程中，您可以看到：

...
[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
...

然后，当我在 Android 模拟器中运行该应用程序时，我使用this.navCtrl.getActive().name获得了正确的页面this.navCtrl.getActive().name 。

我必须说我还没有在真实设备上用签名的应用程序测试过它。

可能是 Android 或模拟器不受影响，可能是那些用户描述的问题在最近的版本中得到了解决，可能是我做错了什么。 因为我不知道对这些问题的回答，所以我保留了我的答案，但我已经添加了这些信息。 请，如果您对此评论有更多了解，请不要忽略或不投票此答案。 如果这个答案被证明是错误的，我会很乐意修改或删除它。

Answer 3

更新@sanzante 答案。 您可以检索活动页面并检查其名称，如下所示。

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

它也适用于 --prod 构建版本。

离子科尔多瓦构建 android --prod --release

Answer 4

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

阅读上面的文档。 将NavController导入您的页面，然后您可以使用NavController将NavController注入您的页面：

constructor(public nav: NavController) {}

或使用 ES6：

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

毕竟，您可以调用this.nav.getActive()来查看当前页面或调用this.nav.isActive('MyPage')来检查您是否在 MyPage

编辑：ES6 版本不是真正的 ES6，但应该适用于 Ionic2

Answer 5

老问题，但这是我的 2 美分。

我相信更简洁的解决方案是使用 NavOptions 中的 id 属性，缺点是您需要注意分配的 id 以避免 id 冲突：

您像这样实例化组件：

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

然后你可以像这样简单地检查它：

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

Answer 6

如果要检查不同的 Pages 组件 this.navCtrl.last().instance instanceof MyPage; 如果您想在同一组件的两个页面实例之间进行比较，应该就足够了，我发现的唯一选项是使用对容器的引用，然后使用 getBoundingClientRect 函数，因为不可见页面的宽度为 0，这可能对某人有所帮助。

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

Answer 7

我跟踪它，不太优雅但有效且简单：

ionViewWillEnter(){
    this.isActualView=true;
}

ionViewWillLeave(){
    this.isActualView=false;
}

...

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

Answer 8

2021 年的更新答案——如果您在 Ionic 项目中使用 Angular，那么您可以通过以下方式获得问题的答案：

<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'"将在该路由处于活动状态时将 is-active 类添加到该 div。