欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解angular路由高亮之RouterLinkActive

程序员文章站 2023-11-13 12:15:40
路由高亮是什么?有什么好处? 当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在dom元素会添加上样式表示当前是位置。 但是一刷...

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

当你在做一个后台管理系统,左边是一排路由导航,点击可以进入不同的页面,那么这个路由所在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用法更新于

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。