Question

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

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

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

Answer 1

IONIC 2＆amp; 3：由于uglification，您不能使用pagename进行生产。

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

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：路由已更改。这看起来像是新的方式：

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得到了正确的页面名称。

我必须说我没有在真实设备中使用已签名的应用程序对其进行测试。

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

Answer 3

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

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

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

离子cordova构建android --prod --release

Answer 4

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

阅读上面的文档。将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

如果要检查其他页面组件，请访问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。

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

8 个答案: