我想突出显示当前有效的链接
<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(...)
处理指令后将调用此函数。
所以这应该永远不会有效。
答案 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就可以了。感谢