Angular Routing routerLinkActive 类即使在其他链接路由上也不会从基页中删除

Question

我提供了一个运行良好的简单路由示例。唯一的问题是routerLinkActive正在向任何活动链接添加类“baboossa”。当我从家转到其他链接为“关于”或“窗口”时，链接变为橙色（由于 baboossa 类），但我仍然可以看到家也是橙色的。为什么现在我有 2 个链接，其中添加了来自routerLinkActive 的类，并且类没有从家中删除？

应用程序组件.html

<ul>
  <li><a [routerLink]="''" routerLinkActive="baboossa">Home</a></li>
  <li><a [routerLink]="'/about'" routerLinkActive="baboossa">About</a></li>
  <li><a [routerLink]="'/window'" routerLinkActive="baboossa">Window</a></li>
</ul>

<router-outlet></router-outlet>

app.module.ts

import { RouterModule } from '@angular/router';

imports: [
  RouterModule.forRoot([
    {path:'', component: HomeComponent},
    {path:'about', component: AboutComponent},
    {path:'window', component:WindowComponent}
  ])
]

样式文件

.baboossa {background:orange;}

结果：

有人能指出为什么我在 baseone (home) 以外的其他活动链接上得到 2 个橙色背景的问题吗？

Answer 1

您可以使用两种方法存档：

1. [routerLinkActiveOptions]="{ exact: true }"使用 routerLinkActive添加routerLinkActiveOptions。

像这样： [routerLink]="''" [routerLinkActive]="['baboossa']" [routerLinkActiveOptions]="{ exact: true }"。

2. 将您的空路由器重定向path : ''到路由器模块中的任何特定路径，例如 '{ path : '', redirectTo: 'home'} 。

像这样 ：

[{
    path: '',    
    pathMatch : 'full',
    redirectTo: 'home'
},
{
    path: 'home',    
    component: HomeComponent
}]

并改变[routerLink]="''"与[routerLink]="'home'"。

这是Stackblitz