将 CSS 应用于活动路由器链接 \[Angular 2\]

Question

我想将特殊的 CSS 样式属性应用于活动路由器链接：

 <a [routerLink]='link'>{{name}}</a>

到目前为止，这是我尝试过的（使用默认的 router-link-active 类）：

 .router-link-active {
	color: #000;
	font-weight: bold;
}

它不起作用，我真的不明白为什么。

原文由 Platus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

目前 Angular 2 有一个 内置属性，您可以在与 [routerLink] 一起使用的任何链接上使用—它是 routerLinkActive 所以你需要做的就是：

 <a [routerLink]='link' routerLinkActive="router-link-active">{{name}}</a>

然后它将识别哪条路由是当前的活动路由并应用您的 router-link-active 类。

笔记：

对于那些在 a 标签以外的标签上使用 routerLink 的人，（我个人在按钮上使用它） routerLinkActive 不起作用，但应该在路由器的下一个版本上工作- https://github.com/angular/angular/issues/9755

原文由 Jarod Moser 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

新路由器有一个名为“ routerLinkActive ”的指令，这是您感兴趣的。

前任。 <a [routerLink]="/user/bob" routerLinkActive="active-link">Bob</a>

“当 url 为‘/user’或‘/user/bob’时，活动链接类将添加到 a 标签中。如果 url 发生变化，该类将被删除。”

原文由 Ron 发布，翻译遵循 CC BY-SA 3.0 许可协议