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。