栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

angular2路由之routerLinkActive指令

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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


 login
 reset

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

总结

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/80817.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号