当我使用动态URL选择离子选项卡时，该选项卡不会突出显示

Question

，所以我的离子选项卡如下(tabs.page.html，我在同一文件夹中的tabs.page.ts文件中设置user_id，而这似乎不是问题(：

<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’
            }
          ]
        },
        ...
  }
];

但是，在我单击它之后，该标签不会保持突出显示。其他一切都起作用，当我悬停在标签上时，它会亮起，当我单击它时，有正确的颜色闪光灯，并且页面会正确加载；但是，在我单击它之后，Tab图标将在加载后保持突出显示("配置文件"选项卡(。有什么想法吗？

Answer 1

ionic将 tab-selected类添加到选定的 ion-tab-button，默认情况下，您应该看到带有颜色属性的.host(.tab选择(设置的样式，从而改变了颜色。检查您的开发控制台并查看不起作用的内容。

您还可以尝试设置自定义样式，并确保代码中没有其他任何内容。

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