Question

在我的应用程序中，有多种方法可以路由到特定资源，例如，我获得了面包屑，以便能够更自由地浏览项目层次结构

SectionA > SectionB > SectionC

其中SectionA有id=1等等。与此同时，我的侧边菜单中显示了routerLink当前所选项目，在上面的示例中，该项目将指向SectionC（id=3）。当有人点击面包屑然后将id从事件绑定到我的侧边菜单中的routerLink时，我会通过发出事件来保持这些同步：

<li>
    <a [routerLink]="['/section, section? section.id : 0]" [routerLinkActive]="['active']"></a>
</li>

这样，如果用户离开该组件，只需单击侧面菜单中的按钮即可返回相同状态（而不必从头开始导航到目标部分）。

这实际上工作得很好，但是，如果我浏览面包屑（因此使用上面的section绑定）routerLinkActive虽然当前的URL并且不会触发侧面菜单按钮上的URL是相同的。

只有直接单击侧面菜单按钮才应用active类，它才能通过绑定工作。

适用于没有参数的URL（没有绑定），所以我想这与Angular的更改检查有关。

问题是，这是预期的行为吗？如果是这样的话，我应该做些什么才能让它继续工作？

Answer 1

复制此问题并标记为维基，因为我不想获得业力：https://stackoverflow.com/a/40528170/88066

1）在你的组件中

import {Router} from 'angular2/router';

isActive(instruction: any[]): boolean {
    return this.router.isActive(this.router.createUrlTree(instruction), true);
}

2）在你的HTML中

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

Router docs on angular.io

Answer 2

应该是

  <a [routerLink]="['/inbox']" class="link" routerLinkActive="active">Inbox</a>

因为它是directive

 ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkActive];

如果是这种情况，还可以考虑指定routerLinkActiveOptions：

<a [routerLinkActiveOptions]="{exact: exact}" ...

如果routerLink具有绑定，为什么routerLinkActive不会触发？

2 个答案: