angular2路由之routerLinkActive指令【推荐】

前端之家收集整理的这篇文章主要介绍了angular2路由之routerLinkActive指令【推荐】前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

<a routerLink="/user/login" routerLinkActive="red">login

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

如何添加两个class

routerLinkActive的两种写法

也可以给routerLinkActive进行配置参数

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

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

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

非激活状态

login 未激活

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

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

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

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

总结

以上所述是小编给大家介绍的angular2路由之routerLinkActive指令。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章