将CSS应用于活动路由器链接[Angular 2] [英] Apply CSS to active router link [Angular 2]
问题描述
我想将特殊的CSS样式属性应用于活动的路由器链接:
I would like to apply special CSS style properties to active router links:
<a [routerLink]='link'>{{name}}</a>
这是我到目前为止尝试过的(使用默认的router-link-active类):
Here is what I tried so far (Using the default router-link-active class):
.router-link-active {
color: #000;
font-weight: bold;
}
这行不通,我真的不明白为什么.
It doesn't work and I really don't understand why.
推荐答案
Currently Angular 2 has a built in attribute that you can use on any link that is used with [routerLink]
it is routerLinkActive
so all you need to do is have:
<a [routerLink]='link' routerLinkActive="router-link-active">{{name}}</a>
,然后它将识别出哪个路由是当前活动路由,并应用您的router-link-active类.
and then it will recognize which route is the current active route and apply your router-link-active class.
注意:
对于那些在除a
标记以外的其他标记上使用routerLink的用户,(我个人是在按钮上使用它的)routerLinkActive
不起作用,但应在下一版路由器上起作用- https://github.com/angular/angular/issues/9755
For those who are using routerLink on tags other than a
tags, (personally i am using it on a button) routerLinkActive
doesn't work but should work on the next release of the router - https://github.com/angular/angular/issues/9755
这篇关于将CSS应用于活动路由器链接[Angular 2]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!