详解angular路由高亮之RouterLinkActive
路由高亮是什么？有什么好处？
当你在做一个后台管理系统，左边是一排路由导航，点击可以进入不同的页面，那么这个路由所在dom元素会添加上样式表示当前是位置。
但是一刷新你会发现，这个样式没了...
怎么办？
采用路由高亮：当路由被激活时允许你添加一个class在你添加路由的dom元素上，只有url变化时才会移除此样式。
当前路由被激活或者当前路由处于激活状态表示页面的url中路由和当前dom标签里的路由想匹配。
// 用法概览
@Directive({
selector: '[routerLinkActive]',
exportAs: 'routerLinkActive'
})
class RouterLinkActive implements OnChanges, OnDestroy, AfterContentInit {
constructor(router: Router, element: ElementRef, renderer: Renderer2, cdr: ChangeDetectorRef)
links: QueryList<RouterLink>
linksWithHrefs: QueryList<RouterLinkWithHref>
get isActive: boolean
routerLinkActiveOptions: {...}
set routerLinkActive: string[] | string
ngAfterContentInit(): void
ngOnChanges(changes: SimpleChanges): void
ngOnDestroy(): void
}
示例
.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表示路由完全匹配时才高亮，如
你还可以使用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样式。
更多API用法更新于 github
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
angularJs使用ng-repeat遍历后选中某一个的方法
今天小编就为大家分享一篇angularJs使用ng-repeat遍历后选中某一个的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于Angular4绑定html内容出现警告的处理方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2017-11-11
这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
这篇文章主要介绍了Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码),需要的朋友可以参考下2017-10-10
这篇文章主要介绍了详解如何为你的angular app构建一个第三方库，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
下面小编就为大家带来一篇angularjs中的$eval方法详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本篇文章主要介绍了angularjs实现上拉加载和下拉刷新数据功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要为大家详细介绍了AngularJS单选框及多选框实现双向动态绑定的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-01-01
Bootstrap和Angularjs配合自制弹框的实例代码
今天小编通过本文给大家分享Bootstrap和Angularjs配合自制弹框的实例代码，代码简单易懂，有需要的朋友跟着小编一起学习2016-08-08
这篇文章运用示例代码给大家详细介绍了利用AngularJS如何实现树形结构(ztree)菜单，文中仅用了几行AngularJS代码就是了这个功能，对大家日常开发很有帮助，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-09-09
最新评论