Navigating from 2 root pages each have tabs showing 2 bad behaviours

Question

I have an app that have ion-footer in the end of each root page :

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

<ipa-footer-button> is a component :

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>

component.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;
    }
  }

so when i navigate from Main page to My account page the tabs of Main page stayed appear for 2 seconds in myAccount page , second problem that the buttons in the footer lost their color , i mean when i navigate from button to button i change the button color of the active to denote the user where he is now. but the 2 buttons stayed the same color.

ionic (Ionic CLI) : 4.0.2 Ionic Framework : ionic-angular 3.9.2 @ionic/app-scripts : 3.2.0

anyone know what’s the issue?

rguerin rguerin · Accepted Answer · 2018-11-05T08:14:49

Did you try using the Ionic ion-tabs component (doc here)?

It would manage the active/inactive display automatically. I also had some transition issue when navigating from a page to another and resolved it by deleting the animation effect. In your case, it will look like this :

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

Navigating from 2 root pages each have tabs showing 2 bad behaviours

1 Answers