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

Question

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

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

这是我到目前为止尝试的(使用默认的router-link-active类):

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

它不起作用,我真的不明白为什么.

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