详解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在IE和Firefox(火狐)的不兼容问题解决方法小结
Apr 13 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
详解javascript中的事件处理
Nov 06 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
npm qs模块使用详解
Feb 07 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
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP排序算法类实例
2015/06/17 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
python:print格式化输出到文件的实例
2018/05/14 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
个人委托书
2014/07/31 职场文书
2014国庆节餐厅促销活动策划方案
2014/09/16 职场文书
党支部三会一课计划
2014/09/24 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
先进党支部事迹材料
2014/12/24 职场文书
党员违纪检讨书
2015/05/05 职场文书
小马王观后感
2015/06/11 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Python的property属性详细讲解
2022/04/11 Python