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

Ionic Framework ionic-v3
1

Hey,
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 (C:\Users\jsleiman\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

anyone know what’s the issue?

2

There are several issues: one is that anything that relies on class names will not work in a production app due to minification. Another is that injecting App into components tramples on separation of concerns and makes for unmaintainable spaghetti.

If you are considering ever porting this app to Ionic 4, I would strongly consider doing so right now, because you can implement this pattern much more cleanly with the Angular router than you can with the Ionic <4 nav system.

3

honestly i didn’t understand what you said … or how to solve it ? could you direct me to the right path .