When I select my ionic tab with a dynamic url, the tab doesn’t highlight

So my ion tab is as follows (tabs.page.html, and I set user_id in the tabs.page.ts file in the same folder, and that doesn't seem to be the issue):

<ion-tabs>

<ion-tab-bar slot="bottom">

...

<ion-tab-button tab=“profile/{{user_id}}”>
<ion-icon name=“person”></ion-icon>
</ion-tab-button>

...

</ion-tab-bar>

</ion-tabs>


And it connects to the following router code (in tabs.router.module.ts):

const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
...,
{
path: ‘profile/:id’,
children: [
{
path: ‘’,
loadchildren: ‘../profile/profile.module#ProfilePageModule’
}
]
},
...
}
];


However, the tab doesn’t remain highlighted after I click it. Everything else works, and when I hover over the tab it lights up, and when I click it there is the proper flash of color and the page loads properly; however, the tab icon doesn’t stay highlighted once it loads after I’ve clicked on it (the profile tab). Any ideas?

Continue reading...