[IONIC 4] [SOLVED] migration from ionic3 with a custom Router and a TabBar

Ionic Framework
1

Hi,

I’m working on the migration of an app with 20 screens.
We build a custom router at this time, and I have some difficulties to do the same thing with the Angular one (it’s possible, but not easy)

So, I would like to keep our legacy router as a first step, but I’m stuck with the TabBar that seem to require the new router.

Ideally, I would have like being able to use the a ion-nav inside each tab, but I don’t see how I can do that.

Do you have any strategy for me ?

2

I realize I can use the TabBar for the GUI, and connect it to my own like below.
It’s probably not the best implementation, but It seem to work for now, until I had time to migrate completely to Angular Router.

<ion-content>
  <ion-nav #fluxNav [root]="fluxPage" [style.visibility]="selectedPage === 'flux' ? 'visible' : 'hidden'"></ion-nav>
  <ion-nav #associationNav [root]="associationListPage" [style.visibility]="selectedPage === 'associationList' ? 'visible' : 'hidden'"></ion-nav>
  <ion-nav #profileNav [root]="profilePage" [style.visibility]="selectedPage === 'profile' ? 'visible' : 'hidden'"></ion-nav>
  <ion-nav #convocationNav [root]="convocationListPage" [style.visibility]="selectedPage === 'convocationList' ? 'visible' : 'hidden'"></ion-nav>
</ion-content>

<ion-tabs #tabs>
  
  <ion-tab-bar slot="bottom">
    <ion-tab-button [selected]="selectedPage === 'flux'" (click)="selectTabHandler('flux')">
        <ion-icon name="sr-flux"></ion-icon>
        <ion-label>Flux</ion-label>
    </ion-tab-button>

    <ion-tab-button [selected]="selectedPage === 'associationList'" (click)="selectTabHandler('associationList')">
        <ion-icon name="sr-club"></ion-icon>
        <ion-label>Mes clubs</ion-label>
    </ion-tab-button>

    <ion-tab-button [selected]="selectedPage === 'profile'" (click)="selectTabHandler('profile')">
        <ion-icon name="sr-profil"></ion-icon>
        <ion-label>Profil</ion-label>
    </ion-tab-button>

    <ion-tab-button [selected]="selectedPage === 'convocationList'" (click)="selectTabHandler('convocationList')">
        <ion-icon name="sr-convocation"></ion-icon>
        <ion-label>Convocations</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>