为什么Angular8 routerLinkActive同时将导航栏中的Home和其他链接设置为活动class？

Question

我正在尝试在我的项目中实现路由。 我已经实现了导航选项卡。 我似乎无法解决以下问题。 每当我单击其他选项卡时，主页选项卡始终处于活动状态。

我尝试添加 routerLinkActiveOption，它无处不在。 但它不只是为我。

<ul class="nav nav-tabs">
   <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
      <a class="nav-link active" [routerLink]="['/']" data-toggle="tab" role="tab">Home</a></li>
   <li class="nav-item" routerLinkActive="active">
      <a class="nav-link " [routerLink]="['/users']"  data-toggle="tab" role="tab">Users</a></li>
   <li class="nav-item" routerLinkActive="active">
      <a class="nav-link " [routerLink]="['/servers']"  data-toggle="tab" role="tab">Servers</a></li>  
</ul>

路线：

const routes: Routes = [
  {path : '' , component:HomeComponent},
  {path : 'users', component:UsersComponent},
  {path : 'servers', component:ServersComponent}
];

Answer 1

您的第一条路线应如下所示

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

查看此链接以了解 pathMatch: 'full' 的作用。

Answer 2

您需要使用routerLinkActiveOptions

<li><a routerLinkActive="active" routerLink="product" [routerLinkActiveOptions]="{exact:true}">Shop</a></li>