路由器链接行为在 Angular2 beta 中被破坏答案

【问题标题】：Router Link behavior is broken in Angular2 beta路由器链接行为在 Angular2 beta 中被破坏
【发布时间】：2016-03-30 03:02:14
【问题描述】：

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

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

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

但在该指令中还有其他行为应该将 router-link-active 类添加到锚点，以防 href 与当前位置相同。

问题是这样不好用。

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

在_router.IsRouteractive里面有一个当前指令字段，它应该包含当前路由组件。并且该组件与 __navigationInstruction 进行比较。实际上，如果路由组件相等 - 链接是最新的。

问题是当前指令是null。它被分配到：

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

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

所以这应该永远不会很好。

【问题讨论】：

【解决方案1】：

我一直在做这样的事情：

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

【讨论】：

谢谢。但我的问题不在 [class.active] 中，而是在“router-link-active”中。在您的示例中，您将在 ang2.beta-0 中自动获取此类。我没听懂
嗯.. 很有趣。我的示例也在使用 beta-0
是的，我明白了。这就是为什么它更有趣也很奇怪。我调试了那个。但我正在使用 TypeScript。并从 TS 编译：github.com/deeptowncitizen/currency-fetcher
不确定是否重要，但我会尝试将带有 routerLinks 的模板移出到单独的 html 模板以避免字符串中的转义

【解决方案2】：

不确定这是否有助于解决可能的路由器损坏问题，但this plunker 有一个很好的解决方案，可以用路由器更改标记其他元素（例如父 li）。 plunker 包含一个指令：LinkActiveDirective.ts（用法可以在Users.ts中看到）

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

用法是这样的：

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

希望对你有帮助。

【讨论】：

感谢您的示例。据我所知，有很多 Angular2 Beta 的例子，效果很好。主要区别在于所有这些示例都使用 CDN JS Angular 参考。我正在使用 webpack + TS + CommonJS。尝试使用 CDN 重现相同的行为

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：