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

【问题标题】：Angular Routing routerLinkActive class not getting removed from base page even on other link routing即使在其他链接路由上，Angular Routing routerLinkActive 类也不会从基本页面中删除
【发布时间】：2018-09-18 07:02:44
【问题描述】：

我提供了一个运行良好的简单路由示例。唯一的问题是 routerLinkActive 将类 'baboossa' 添加到任何活动的链接。当我以“关于”或“窗口”的形式从家转到其他链接时，链接变为橙色（由于 baboossa 类），但我仍然可以看到家也是橙色的。为什么现在我有 2 个链接，其中包含来自 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>

app.module.ts

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

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

styles.css

.baboossa {background:orange;}

结果：

有人可以指出为什么我在除 baseone（home）之外的其他活动链接上获得 2 个橙色背景的问题吗？

【问题讨论】：

{path:'', component: HomeComponent} 应该是{path:'', component: HomeComponent, pathMatch: 'full' }
试过了，没用。结果相同。
将{path:'', component: HomeComponent}更改为{path:'home', component: HomeComponent}
感谢@AbhishekEkaanth - 这行得通。我用这个和第一个默认的空白路由再创建了一行——这很好用。

标签： javascript angular angular-routing

【解决方案1】：

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

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

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

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

像这样：

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

并将[routerLink]="''" 更改为[routerLink]="'home'"。

这里是Stackblitz

【讨论】：

更多关于这种方法的信息在Angular guide。

【解决方案2】：

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

https://stackblitz.com/edit/angular-router-basic-example-jufxu8?file=app/app.routing.module.ts

了解更多Angular Routing

【讨论】：

【解决方案3】：

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

<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>

然后

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

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

【讨论】：

【解决方案4】：

我也有同样的问题。但是我想在家的时候清空路径。

而且我不想使用 [routerLinkActiveOptions]="{ exact: true }" 因为当我在 questions/:questionsId 问题菜单中时处于不活动状态。

喜欢：abc.com

不是：abc.com/home

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

【讨论】：

【解决方案5】：

我已经为我的导航栏使用了引导程序，下面的代码在不更改类的情况下运行完美。 routerLinkActive="active" 应该这样做。

  <ul class="nav nav-pills nav-fill">
    <li class="nav-item">
      <a class="nav-link" routerLinkActive="active" routerLink="/followers">Followers</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" routerLinkActive="active" routerLink="/posts">Posts</a>
    </li>
  </ul>
</nav>```

【讨论】：