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面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
自动生成文章摘要的代码[JavaScript 版本]
2007/03/20 Javascript
jQuery 位置插件
2008/12/25 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
理解javascript异步编程
2016/01/27 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Python如何定义接口和抽象类
2020/07/28 Python
Python下载网易云歌单歌曲的示例代码
2020/08/12 Python
Django mysqlclient安装和使用详解
2020/09/17 Python
25道Java面试题集合
2013/05/21 面试题
软件工程专业推荐信
2013/10/28 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
《手指教学》反思
2014/02/14 职场文书
机电一体化求职信
2014/03/10 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
安全标兵事迹材料
2014/08/17 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
介绍信样本
2015/01/31 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Python 实现Mac 屏幕截图详解
2021/10/05 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS