详解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 相关文章推荐
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
Js面试算法详解
Apr 08 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
vue实现百度搜索功能
Dec 28 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+java实现自动新闻滚动窗口
2006/10/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
PHP 输出缓存详解
2009/06/20 PHP
PHP读取xml方法介绍
2013/01/12 PHP
学习php分页代码实例
2013/10/24 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
Javascript字符串对象的常用方法简明版
2014/06/26 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python二维码生成识别实例详解
2019/07/16 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
Python日志处理模块logging用法解析
2020/05/19 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
个人委托书格式
2014/04/04 职场文书
电气自动化求职信
2014/06/24 职场文书
党的群众路线教育实践活动学习计划
2014/11/03 职场文书
节水倡议书
2015/01/19 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
Python将CSV文件转化为HTML文件的操作方法
2021/06/30 Python
python利用pandas分析学生期末成绩实例代码
2021/07/09 Python
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL