angular2路由之routerLinkActive指令【推荐】

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

目前成都创新互联公司已为超过千家的企业提供了网站建设、域名、网页空间、网站托管、服务器租用、企业网站设计、荣成网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

.red{
 color: red;
}
 
login

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

如何添加两个class   

login

routerLinkActive的两种写法   

login
login

也可以给routerLinkActive进行配置参数

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

login

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


 login {{ rla.isActive ? '激活' : '未激活'}}

如果当前路由处于激活状态,则会显示:login 激活

非激活状态

login 未激活

上述的 rla 为routerLinkActive缩写,它可以随便定义。

重点来了: 使用routerLink元素的父元素上使用RouterLinkActive指令

是不是给每个路由都分别添加样式好费事?给它父元素添加上路由高亮指令即可解决问题!  

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

总结

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


本文标题:angular2路由之routerLinkActive指令【推荐】
网站地址:http://hxwzsj.com/article/jciosc.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 成都h5网站建设 网站建设 成都网站制作 网站制作公司 成都网站设计 成都企业网站制作 企业网站设计 成都网站制作 成都网站设计 手机网站制作 自适应网站建设 定制网站建设多少钱 成都网站建设 外贸网站建设 网站设计公司 成都网站建设公司 成都响应式网站建设 成都网站制作 成都网站建设 成都模版网站建设 成都网站建设 手机网站建设