Question

在浏览应用程序本身时使用动态生成的链接时，RouterLinkActive无效。

e.g。在我的顶部导航中我有这个;

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a>

虽然硬编码版本可行。

<a [routerLink]=['user','bob']>View Bobs Account</a>

这是一个问题; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview

单击“John”，“Dynamic Router Link Name =”和“John”都应该处于活动状态。这有时适用于第一次点击，如果是这样，然后点击返回“主页”，再次单击“约翰”，您将看到只有硬编码链接被注册为活动，即使hrefs相同。

这是设计/不可能吗？还是我设置错了？

Answer 1

在您的组件中：

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

isActive(instruction: any[]): boolean {
  // Set the second parameter to true if you want to require an exact match.
  return this.router.isActive(this.router.createUrlTree(instruction), false);
}

在您的HTML中：

<a [class.active]="isActive(['user', currentUser.name])">

Router.isActive() documentation on angular.io

Answer 2

接受的答案对我没有用，我只是想突出顶级路线匹配所以我用过：

isActive(url): boolean {
    return this.router.url.includes(url);
}

和：

[class.active]="isActive('url')"

Answer 3

更改您的html如下：

<a [routerLink]=['user', currentUser.name] 
  routerLinkActive='active'>
    {{currentUser.name}}
</a>

您还可以查看Why Angular2 routerLinkActive sets active class to multiple links?

Answer 4

routerLinkActive在初始加载时进行评估，并且仅在路由更改时进行评估。链接更改时不会重新评估。因此，动态生成的链接不适用于routerLinkActive。上面的Victor Bredihin解决方案可以在渲染过程中评估组件功能。

Answer 5

我发现以下变通方法也适用于我的代码：

<a [routerLink]=['user', currentUser.name]
   [routerLinkActive]='"active dummyclassname-" + currentUser.name'>
   {{currentUser.name}}
</a>

即欺骗Angular重新验证“ routerLinkActive”。

Answer 6

您可以为链接元素的祖先应用一个选项

[routerLinkActiveOptions]="{exact: true}"

RouterLink的RouterLinkActive带参数（/ dynamic）

6 个答案: