angular - 路由器链接行为在 Angular2 beta 中被破坏

Question

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

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

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

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

问题是这效果不好。

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

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

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

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

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

所以这不应该很好地工作。

score 1 · Accepted Answer

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

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

用法是这样的：

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

希望能帮助到你。

score 1 · Accepted Answer

我一直在做这样的事情：

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

4 回答 4