3

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

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 的更改检查有关。

问题是，这是预期的行为吗？如果是，我应该怎么做才能让它正常工作？

4

2 回答 2

3

复制此问题并标记为 wiki，因为我不想获得业力：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])">

angular.io 上的路由器文档

于 2017-01-25T18:16:41.887 回答
-2

它应该是

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

因为它是一个directive

 ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkActive];

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

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

于 2016-06-28T20:39:33.590 回答