Angular2 beta中破坏了路由器链接行为

时间:2015-12-23 16:15:39

标签: angular typescript1.7 angular2-directives

我想突出显示当前有效的链接

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

渲染后我得到一个带有正确链接的<a>标记,效果很好。

但是,如果 href 与当前位置相同,则此指令中还有其他行为应将 router-link-active 类添加到锚点。< / p>

问题在于这种方法效果不佳。

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

_router.IsRouteractive 内,有当前指令字段,其中应包含当前路由组件。并且该组件与__navigationInstruction进行比较。实际上,如果路由组件相等 - 链接是最新的。

问题是当前指令 null 。它变成了:

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

处理指令后将调用此函数。

所以这应该永远不会有效。

4 个答案:

答案 0 :(得分:1)

我一直在做这样的事情:

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

这似乎对我的主菜单效果很好: http://www.syntaxsuccess.com/angular-2-samples/#/demo/spreadsheet

答案 1 :(得分:1)

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

该指令挂钩[linkActive]并侦听路由器更改。当路由器链接处于活动状态时,该类将在该元素上变为活动状态。

用法是这样的:

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

希望它有所帮助。

答案 2 :(得分:0)

我有一个你可以使用的指令。请参阅Pull-Request https://github.com/angular/angular/pull/6407/files

答案 3 :(得分:0)

此处https://github.com/angular/angular/issues/6360#event-511390805表示

  

在system.js脚本标签下面移动angular2-polyfills.js和es6-shim.js就可以了。感谢