详解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 12 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
浅谈javascript中return语句
Jul 15 Javascript
Vue数据驱动模拟实现4
Jan 12 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
layui使用表格渲染获取行数据的例子
Sep 13 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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-MySQL教程归纳总结
2008/06/07 PHP
php cookie 登录验证示例代码
2009/03/16 PHP
PHP 组件化编程技巧
2009/06/06 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
两个php日期控制类实例
2014/12/09 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
AngularJS上传文件的示例代码
2018/11/10 Javascript
python多重继承新算法C3介绍
2014/09/28 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
PyCharm代码格式调整方法
2018/05/23 Python
Python如何发布程序的详细教程
2018/10/09 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
大学毕业生最详细的自我评价分享
2013/11/18 职场文书
建材投资建议书
2014/05/16 职场文书
文明家庭事迹材料
2014/12/20 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
教学督导岗位职责
2015/04/10 职场文书
2015年环卫工作总结
2015/04/28 职场文书
工作简报格式范文
2015/07/21 职场文书
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers