angular2的routerLinkActive指令在路由激活时添加样式class

.red{
 color: red;
}
 
<a routerLink="/user/login" routerLinkActive="red">login</a>

当url是user或者/user/login的时候,a标签将会被加上classred。当url变化为别的时,class将会被移除。

如何添加两个class   

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>

routerLinkActive的两种写法   

<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
<a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>

也可以给routerLinkActive进行配置参数

传递exact: true表示路由完全匹配时才高亮,如

<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>

使用isActive检查当前是否路由处于激活状态   

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive "htmlcode">
<div routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</div>

只要给a标签的父元素div添加上routerLinkActive和routerLinkActiveOptions, 当路由是/user/login或/user/reset时其所在dom元素分别被添加上red样式。 这里需要注意的是要添加上routerLinkActiveOptions指定完全匹配,不然会出现url为user时两个路由均被匹配上添加了red样式。

总结

以上所述是小编给大家介绍的angular2路由之routerLinkActive指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
angular,routerlink,angular2路由

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“angular2路由之routerLinkActive指令【推荐】”

暂无“angular2路由之routerLinkActive指令【推荐】”评论...