为什么主页选项卡始终处于活动状态？

Question

在我的应用程序中有两条路线，home 和 page1

有两个导航到相关路由的锚标签，我将活动标签的背景颜色更改为红色，默认颜色为黄色。

当活动路由为“/”时，主页选项卡变为红色 - OK
当我点击“/page1”时，主页选项卡和第 1 页都变成红色，为什么？我只有页面 1 选项卡变红。

这是代码片段

const routes: Routes = [
  { path: 'page1', component: Page1Component },
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '' }
];

<a routerLink="/" [routerLinkActive]="['active-tab']">Home</a>

<a routerLink="/page1" [routerLinkActive]="['active-tab']">Page 1</a>

<router-outlet></router-outlet>

a{
  padding: 10px;
  background: yellow;
}

a.active-tab{
  background: red;
}

这里是the stackblitz code of the issue 您可以看到当单击 /page2 路由时两个选项卡都处于活动状态。

我尝试了解决方案

<a routerLink="/" [routerLinkActive]="['active-tab']" [routerLinkActiveOptions]="{exact: true}"> Home </a>

但是当我使用查询参数访问主页路由时(http://localhost:4200/?myParam=5)，主页选项卡未被激活。

Answer 1

这是一个长运行issue

如您所见，您可以

精确匹配 url，包括查询参数

或

匹配当前路由，包括后代路由

一般的解决方法是避免在必要时使用 routerLinkActive，而是手动检查路线。

component.html

<a routerLink="/" [class.active-tab]="isLinkActive('/')">
  Home
</a>

component.ts

constructor(private router: Router) {}

isLinkActive(url): boolean {
  const queryParamsIndex = this.router.url.indexOf('?');
  const baseUrl = queryParamsIndex === -1 ? this.router.url : this.router.url.slice(0, queryParamsIndex);
  return baseUrl === url;
}

尽管如此，您仍应尽可能使用 routerLinkActive，并在未来密切关注此问题，因为 if/when Angular 团队设法构建了很多功能的人要求。

演示：https://stackblitz.com/edit/angular-cac4a3

Answer 2

其实就是这个问题。 url 不会保持不变（或者换句话说，如果存在某些参数，则完全相同）。但是实际上已经有人有办法解决这个问题 2. 分享类似问题的 Whosebug post 的 link。主要答案是您的解决方案，下一个 post 在接受的答案之后（如果您只有 2 个选项卡使用那个）它具有隐藏属性（喀麦隆的答案）。

访问以下link了解详情：

为什么主页选项卡始终处于活动状态？

Why home tab is always active?

angular

angular-router

angular8