路由器链接行为在Angular2测试版中被破坏

Question

我想突出显示当前活动的链接

<a [routerLink]="['/route']" />

在呈现之后，我将得到一个具有正确链接的<a>标记，这很好。

但是，在这个指令中也有额外的行为，如果href与当前位置相同，则应该将路由器链接活动类添加到锚点。

问题是这不太好。

get isRouteActive(): {
    return this._router.isRouteActive(this._navigationInstruction);
}

在_router.IsRouteractive内部有当前指令字段，该字段应该包含当前路由组件。该组件将与__navigationInstruction进行比较。实际上，在路由组件相等的情况下，链接是当前的。

问题是当前指令为null。它被指定为：

Router.prototype.commit = function(...)

此函数在指令处理后被调用。

所以这不应该有好的效果。

Answer 1

我一直在做这样的事情：

<li [class.active]="somethingThatReturnsTrueOrFalse()"><a [routerLink]="['/About']" class="link">About</a></li>

这似乎适合我的主菜单：http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

Answer 2

不确定这是否有助于解决可能出现故障的路由器行为问题，但是这个柱塞有一个很好的解决方案，可以用路由器更改标记其他元素(例如父li)。柱塞包括一个指令: LinkActiveDirective.ts (用法可以在Users.ts中看到)

该指令挂在linkActive上，并侦听路由器的更改。当路由器链路处于活动状态时，类就会在元素上激活。

用法如下：

<li linkActive>
  <a [routerLink]="['./Home']">Home</a>
</li>

希望能帮上忙。

Answer 3

我有个指令你可以用。请参见拉请求https://github.com/angular/angular/pull/6407/files。