[ion-tabs] Tabs not focused when using a dynamic identifier

Ionic Framework Ionic Angular
1

Hi all,

I am using ion-tabs to help navigate through my app, I have found if I use a sublink with a dynamic identifier the ion-tab remains in its focused state (which is as expected)

However if i use the dynamic ID when loading the tab it loses it’s focused state. The code for which is below

Routing Module

const routes: Routes = [
  {
    path: '',
    component: JobPage,
    children: [
      {
        path: 'parts',
        children: [
          {
            path: 'basket',
            loadChildren: () => import('./Parts/basket/basket.module').then(m => m.BasketPageModule)
          },
          {
            path: ':id',
            loadChildren: () => import('./Parts/part-requests.module').then(m => m.PartRequestsPageModule)
          },
        ]
      }

Menu page
<ion-tabs>
    <ion-tab-bar slot="bottom">

        <ion-tab-button class="tab-button" tab='parts/{{this.job.RecordNumber}}'>
            <fa-icon [icon]="faCubes"></fa-icon>
        </ion-tab-button>

    </ion-tab-bar>
</ion-tabs>

I have removed the Identifier and it remains focused, so to me this would suggest an issue with the ID being used.

any help is much appriciated

2

If this really is like this, i would recommend to open an Issue here. If you do so, please include a Repo for the Team to reproduce this, in the best case just a “tabs” starter project with the small adjustments needed

3

I’m also curious to see what happens if you bind [tab] and set up the entire string in the controller, as opposed to using {} interpolation in the template.