博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angular路由高亮--长明灯RouterLinkActive
阅读量:5878 次
发布时间:2019-06-19

本文共 1454 字,大约阅读时间需要 4 分钟。

路由高亮是什么?有什么好处?

当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在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
linksWithHrefs: QueryList
get isActive: boolean routerLinkActiveOptions: {...} set routerLinkActive: string[] | string ngAfterContentInit(): void ngOnChanges(changes: SimpleChanges): void ngOnDestroy(): void}复制代码

示例

.red{    color: red;}复制代码
login复制代码

当url是user或者/user/login的时候,a标签将会被加上classred。当url变化为别的时,class将会被移除。

如何添加两个class?

login复制代码

routerLinkActive的两种写法

loginlogin复制代码

也可以给routerLinkActive进行配置参数

传递exact: true表示路由完全匹配时才高亮,如

login复制代码

你还可以使用isActive检查当前是否路由处于激活状态

  login {
{ rla.isActive ? '激活' : '未激活'}}
复制代码

如果当前路由处于激活状态,则会显示:

login 激活复制代码

非激活状态

login 未激活复制代码

上述的 rla 为routerLinkActive缩写,它可以随便定义。

重点来了: 你可以在使用routerLink元素的父元素上使用RouterLinkActive指令

是不是给每个路由都分别添加样式好费事?给它父元素添加上路由高亮指令即可解决问题!

复制代码

只要给a标签的父元素div添加上routerLinkActiverouterLinkActiveOptions, 当路由是/user/login/user/reset时其所在dom元素分别被添加上red样式。 这里需要注意的是要添加上routerLinkActiveOptions指定完全匹配,不然会出现url为user时两个路由均被匹配上添加了red样式。

| 更多API用法更新于

转载地址:http://afcix.baihongyu.com/

你可能感兴趣的文章
[翻译]Protocol Buffer 基础: C++
查看>>
runloop与线程的关系
查看>>
[Bzoj2246]迷宫探险(概率+DP)
查看>>
[译] 感受 4px 基线网格带来的便利
查看>>
oracle常用函数
查看>>
MYBATIS
查看>>
详解消息队列的设计与使用
查看>>
iOS 项目优化
查看>>
筛选出sql 查询结果中 不包含某个字符
查看>>
8进制与16进制
查看>>
使用Sqoop从mysql向hdfs或者hive导入数据时出现的一些错误
查看>>
mybatis:Invalid bound statement (not found)
查看>>
电脑中毒的现象
查看>>
django表单操作之django.forms
查看>>
webSocket vnc rfb
查看>>
列表推导式 生成器表达式
查看>>
控制子窗口的高度
查看>>
Linux 防火墙iptables命令详解
查看>>
打造笔记本电脑基地重庆要当全球“老大”
查看>>
处理 Oracle SQL in 超过1000 的解决方案
查看>>