Javascript 角度路由RouterLink活动类即使在其他链接路由上也不会从基页删除

我提供了一个简单的路由示例，效果很好。唯一的问题是，routerLinkActive正在将类“baboossa”添加到激活的链接中。当我从家转到其他链接“关于”或“窗口”时，链接会变成橙色（由于baboossa类），但我仍然可以看到家也是橙色的。为什么现在我有两个链接，其中有来自routerLinkActive的新增类，而这些类没有从家中移除

app.component.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>

样式。css

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个橙色背景的问题吗

---

我想你可以查看下面的链接

---

有关更多信息，您可以使用两种方法存档：

添加routerLinkActiveOptions

[routerLinkActiveOptions]=“{exact:true}”

，并使routerLinkActive处于活动状态 像这样：

[routerLink]=“''[routerLinkActive]=“['baboossa']”[routerLinkActiveOptions]=“{exact:true}”

将空路由器重定向到路由器模块中的任何特定路径，如“{path:”，重定向到“home”}

像这样：

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

并将

[routerLink]=“home”

更改为

[routerLink]=“home”

---

这里是

这里是另一种方法，您可以使用命名路径作为默认路径，而不是空路径。RESTful API方法，其中URL易于理解

<ul>
  <li><a [routerLink]="[ 'home' ]" 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>

---

我也有同样的问题。但当我在家的时候，我想清空这条路

我不想使用[routerLinkActiveOptions]=“{exact:true}”，因为当我在问题/：问题SID问题菜单中处于非活动状态时

比如：abc.com

不是：abc.com/home

const routes: Routes = [{ path: '', component: HomeComponent }, { path: 'questions/:questionsId', component: QuestionsComponent }, { path: 'questions', component: QuestionsComponent }];

---

{path:''，component:HomeComponent}

应为

{path:''，component:HomeComponent，pathMatch:'full'}

已尝试，未工作。相同的结果。将

{path:''，component:HomeComponent}

更改为

{path:'home'，component:HomeComponent}

谢谢@AbhishekEkaanth-这很有效。我用它和第一个默认的空白路由再创建了一行——效果很好。

const routes: Routes = [{ path: '', component: HomeComponent }, { path: 'questions/:questionsId', component: QuestionsComponent }, { path: 'questions', component: QuestionsComponent }];