为什么 Angular8 routerLinkActive 将导航栏中的主页和其他链接同时设置为活动 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>

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

Why Angular8 routerLinkActive sets Home and other links in the nav bar as active class at the same time?

html

typescript

angular-ui-bootstrap

angular