详解angular路由高亮之RouterLinkActive
路由高亮是什么?有什么好处?
当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在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表示路由完全匹配时才高亮,如
你还可以使用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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法