详解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开发技术大全-第3章 js数据类型
Jul 03 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
全面分析JavaScript 继承
May 30 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
JS实现灯泡开关特效
Mar 30 Javascript
关于Javascript闭包与应用的详解
Apr 22 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 表单提交给自己
2008/07/24 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
js实现通用的微信分享组件示例
2014/03/10 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
javascript变量提升和闭包理解
2018/03/12 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
详解React 元素渲染
2020/07/07 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python 排列组合之itertools
2013/03/20 Python
python读取浮点数和读取文本文件示例
2014/05/06 Python
python利用Guetzli批量压缩图片
2017/03/23 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
社保转移委托书范本
2014/10/08 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
vue自定义右键菜单之全局实现
2022/04/09 Vue.js