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

【问题标题】：Why home tab is always active?为什么主页选项卡始终处于活动状态？
【发布时间】：2020-04-07 07:51:49
【问题描述】：

在我的应用中有两个路由，home 和 page1

这是导航到相关路线的两个锚标记，我将活动选项卡的背景颜色更改为红色，默认颜色为黄色。

当活动路由为“/”时，主页选项卡变为红色 - 确定
当我单击“/page1”时，主页选项卡和第 1 页都变红了，为什么？我只有第 1 页标签变为红色。

这里是代码sn-ps

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 route 时，您可以看到两个选项卡都处于活动状态。

我尝试了解决方案

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

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

【问题讨论】：

标签： angular angular8 angular-router

【解决方案1】：

这是一个长期运行的issue

如您所见，您可以任一

匹配准确的网址，包括查询参数

或

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

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

component.html

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

组件.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，并在未来如果/当 Angular 团队设法构建很多人要求的功能时关注此问题。

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

【讨论】：

【解决方案2】：

这实际上是问题所在。 url 不会保持不变（或者换句话说，如果有一些参数是准确的）。但是实际上已经有人有办法解决这个问题 2. 分享 stackoverflow 帖子的链接以解决类似问题。主要答案是您的解决方案和接受答案之后的下一篇文章（如果您只有 2 个选项卡，请使用它）它具有隐藏属性（喀麦隆的答案）。

访问以下链接了解详情：

How to use "routerLinkActive" with query params in Angular 6?

【讨论】：