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

Question

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

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

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

Answer 1

IONIC 2＆3：由于丑陋，您无法使用页面名称进行生产。

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

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);
}

UPDATE

在评论中，您可以看到一些用户声称由于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构建版本。

ionic cordova build 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

如果要检查其他页面组件，请访问MyPage的this.navCtrl.last（）。instance实例；如果要在同一组件的两个页面实例之间进行比较，应该足够了，我发现的唯一选择是使用对容器的引用，然后使用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