angular2路由之routerLinkActive指令【推荐】


Posted in Javascript onMay 30, 2018

angular2的routerLinkActive指令在路由激活时添加样式class

.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样式。

总结

以上所述是小编给大家介绍的angular2路由之routerLinkActive指令,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
vue实现div单选多选功能
Jul 16 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 #jQuery
Vue2.0 实现移动端图片上传功能
May 30 #Javascript
jQuery 导航自动跟随滚动的实现代码
May 30 #jQuery
Javascript获取某个月的天数
May 30 #Javascript
JS实现键值对遍历json数组功能示例
May 30 #Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 #Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 #Javascript
You might like
用在PHP里的JS打印函数
2006/10/09 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP中的类型约束介绍
2015/05/11 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
javascript动态向网页中添加表格实现代码
2014/02/19 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
javascript设计模式之模块模式学习笔记
2017/02/15 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
[01:31]完美与DOTA2历程
2014/07/31 DOTA
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
python 通过exifread读取照片信息
2020/12/24 Python
python实现马丁策略的实例详解
2021/01/15 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
音乐专业应届生教师求职信
2013/11/04 职场文书
培训主管的岗位职责
2013/11/23 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
在js中修改html body的样式
2021/11/11 Javascript
悬疑名作《朋友游戏》动画无字ED宣传片 新角色公开
2022/04/13 日漫