详解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表示路由完全匹配时才高亮，如

复制代码 代码如下:<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用法更新于 github

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