好资源导航 » 文章资讯 » angular2路由之routerLinkActive指令【推荐】

angular2路由之routerLinkActive指令【推荐】

2023-09-12 03:24:05 59

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指令

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


login
reset

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

总结

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

返回顶部
514930285
czq8825@qq.com

angular2路由之routerLinkActive指令【推荐】

热门推荐

随机推荐