angular2路由之routerLinkActive指令【推荐】
更新时间：2018年05月30日 16:33:39 作者：(聂伟)
这篇文章主要介绍了angular2路由之routerLinkActive指令的相关资料,需要的朋友可以参考下
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 ? '激活' : '未激活'}}
</a>
如果当前路由处于激活状态，则会显示：login 激活
非激活状态
login 未激活
上述的 rla 为routerLinkActive缩写，它可以随便定义。
重点来了： 使用routerLink元素的父元素上使用RouterLinkActive指令
是不是给每个路由都分别添加样式好费事？给它父元素添加上路由高亮指令即可解决问题！
<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指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章给的大家介绍在AngularJS中如何使用谷歌地图把当前位置显示出来，本文介绍的非常详细，具有参考借鉴价值，对angularjs 谷歌地图相关知识感兴趣的朋友一起学习吧2016-01-01
浅析如何利用angular结合translate为项目实现国际化
利用angular进行国际化转换时利用【ng-bind-html】来进行语言的翻译是接近几乎比较完美的方案，不会像利用【{{}}】模式，当页面加载缓慢时导致页面太丑。本文对其实现方法进行介绍，有需要的朋友可以看下2016-12-12
本篇文章主要介绍了Angularjs使用指令做表单校验的方法，详细的介绍了用指令做校验的方法，具有一定的参考价值，有兴趣的可以了解一下。2017-03-03
这篇文章主要为大家介绍了AngularJs动态加载模块和依赖注入，感兴趣的小伙伴们可以参考一下2016-01-01
本篇文章主要介绍了angular4 如何在全局设置路由跳转动画的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
AngularJS中update两次出现$promise属性无法识别的解决方法
最近在工作中用AngularJS中update了两次之后发现$promise属性无法识别了，后来通过查找相关的资料终于解决了，想着记录下方便自己或者有需要的朋友，所以本文主要介绍了AngularJS中update两次出现了$promise属性无法识别的解决方法,需要的朋友可以参考借鉴。2017-01-01
今天小编就为大家分享一篇Angular2之二级路由详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消，详细的介绍了订阅与取消的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
本篇文章主要介绍了详解Angular 4.x NgIf，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了AngularJS实现Model缓存的方式，分享了多种AngularJS实现Model缓存的方法，感兴趣的小伙伴们可以参考一下2016-02-02
最新评论