從2個根頁面導航，每個頁面都有顯示2個不良行為的選項卡

Question

我有一個在每個根頁面末尾都有ion-footer的應用程序：

<ion-footer>
  <ipa-footer-buttons></ipa-footer-buttons>
</ion-footer>

<ipa-footer-button>是一個組件：

html ：

<ion-toolbar>
  <ion-buttons class="footer-buttons">
    <!--Main-->
    <button ion-button block color="icons-color" (click)="footerClick('MainTabsPage')">
      <div [ngClass]="{'active': currentPage == 'MainTabsPage', 'inactive': currentPage != 'MainTabsPage'}">
        <ion-icon name="md-home"></ion-icon>
        <label class="title-icon-footer">Main Page</label>
      </div>
    </button>


    <button ion-button block color="icons-color" (click)="footerClick('MyAccountTabsPage')">
      <div [ngClass]="{'active': currentPage == 'MyAccountTabsPage', 'inactive': currentPage != 'MyAccountTabsPage'}">
        <ion-icon name="md-person"></ion-icon>
        <label class="title-icon-footer">my Account</label>
      </div>
    </button>
  </ion-buttons>
</ion-toolbar>

組件 .ts：

constructor(private _app: App) {
    this._app.getRootNav().viewDidEnter.subscribe((next: ViewController) => {
      this.currentPage = next.name;
    })
  }
footerClick(page) {
    switch (page) {
      case 'MainTabsPage'://main page
        this._app.getRootNav().setRoot('main-tabs', {tabIndex: 0}, {updateUrl: true});
        break;
      case 'MyAccountTabsPage':
        this._app.getRootNav().setRoot('my-account-tabs', {tabIndex: 0}, {updateUrl: true});
        break;
    }
  }

因此，當我從主頁導航到“我的帳戶”頁面時，停留在“主頁”中的選項卡在myAccount頁面中顯示2秒鍾，第二個問題是頁腳中的按鈕失去了顏色，這意味着當我從一個按鈕導航到另一個按鈕時，我更改了按鈕活動項目的顏色，以表示用戶現在所在的位置。 但兩個按鈕保持相同的顏色。

ionic（ Ionic CLI ）：4.0.2 Ionic框架：ionic-angular 3.9.2 @ ionic / app-scripts：3.2.0

有人知道這是什么問題嗎？

Answer 1

您是否嘗試使用Ionic ion-tabs組件（ 此處的文檔）？

它將自動管理活動/非活動顯示。 從頁面導航到另一個頁面時，我也遇到了一些過渡問題，並通過刪除動畫效果解決了該問題。 在您的情況下，它將如下所示：

this._app.getRootNav().setRoot('my-account-tabs', {tabIndex: 0}, {updateUrl: true, animate: false});