详解angular路由高亮之RouterLinkActive


Posted in Javascript onApril 28, 2018

路由高亮是什么?有什么好处?

当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在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表示路由完全匹配时才高亮,如

<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样式。

更多API用法更新于 github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 字符串转换成数字的三种方法
Mar 23 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
Javascript基础_简单比较undefined和null 值
Jun 14 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
ES6解构赋值实例详解
Oct 31 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
vue弹窗组件使用方法
Apr 28 #Javascript
学习Vue组件实例
Apr 28 #Javascript
vue弹窗消息组件的使用方法
Sep 24 #Javascript
layui实现动态和静态分页
Apr 28 #Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 #Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 #Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 #Javascript
You might like
PHP实现文件安全下载
2006/10/09 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php HTML无刷新提交表单
2016/04/05 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
网站基于flash实现的Banner图切换效果代码
2014/10/14 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
轻松实现python搭建微信公众平台
2016/02/16 Python
python 性能优化方法小结
2017/03/31 Python
Python之list对应元素求和的方法
2018/06/28 Python
python得到windows自启动列表的方法
2018/10/14 Python
python函数的作用域及关键字详解
2019/08/20 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
Django用数据库表反向生成models类知识点详解
2020/03/25 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
外科实习自我鉴定
2013/10/06 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
一年级班主任寄语
2014/01/19 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
计算机专业自荐信
2014/05/24 职场文书
治庸问责心得体会
2014/09/12 职场文书
惊天动地观后感
2015/06/10 职场文书