javascript - 将 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 有一个 built in attribute您可以在与 [routerLink] 一起使用的任何链接上使用它是 routerLinkActive 所以您需要做的就是:

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

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

注意:

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