angular - 为什么主页选项卡始终处于事件状态？

Question

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

这是导航到相关路线的两个 anchor 标签，我将事件标签的背景颜色更改为红色，默认颜色为黄色。

1. 当事件路由为“/”时，主页选项卡变为红色 - OK
2. 当我点击“/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)访问 home 路由时，home 选项卡未被激活。

Answer 1

这是一个长跑issue

如您所见，您可以要么

1. 匹配准确的 url，包括查询参数

或

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

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

组件.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 团队是否/何时设法构建许多人要求的功能的 future 时密切关注这个问题.

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