详解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复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
javascript实现实时输出当前的时间
Apr 27 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
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写入数据库类代码分享
2011/07/26 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
javascript事件模型介绍
2016/05/31 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
Python中使用select模块实现非阻塞的IO
2015/02/03 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
Python检测数据类型的方法总结
2019/05/20 Python
对Django url的几种使用方式详解
2019/08/06 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
pytorch之添加BN的实现
2020/01/06 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
墨西哥网上购物:Linio墨西哥
2016/10/20 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
心理健康课教学反思
2014/02/13 职场文书
开学季活动策划方案
2014/02/28 职场文书
保险内勤岗位职责
2014/04/05 职场文书
少年雷锋观后感
2015/06/10 职场文书
银行求职信怎么写
2019/06/20 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技