Ionic2

Question

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

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

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

Answer 1

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') 检查您是否在我的页面

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

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

离子 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 4

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

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

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

ionic cordova build android --prod --release

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 class 添加到 div。

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

Ionic2 - check if page is active

angular