Когда я выбираю свою ионную вкладку с динамическим URL, вкладка не выделяется

Question

Итак, моя вкладка выглядит следующим образом (tabs.page.html, и я установил user_id в файле tabs.page.ts в той же папке, и это не проблема):

<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>

И он подключается к следующему коду роутера (в tabs.router.module.ts):

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

Однако эта вкладка не остается подсвеченной после того, как я ее щелкну.Все остальное работает, и когда я наводю курсор мыши на вкладку, она загорается, и когда я нажимаю на нее, появляется правильная вспышка цвета, и страница загружается правильно;однако значок вкладки не остается выделенным после загрузки после того, как я щелкнул по нему (вкладка профиля).Есть идеи?

Answer 1

Ionic добавляет tab-selected класс к выбранному ion-tab-button, по умолчанию вы должны увидеть набор стилей для .host (.tab-selected) с атрибутом color, который меняет цвет.Проверьте консоль разработчика и посмотрите, что не работает.

Вы также можете попробовать настроить собственный стиль и убедиться, что ничто другое в вашем коде не переопределяет его.

ion-tab-button.tab-selected {
  color: var(--ion-color-secondary) !important;
  background: var(--ion-color-primary) !important;
}