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时其父元素div会被添加上red样式。
• 这里须要注意的是routerLinkActiveOptions指彻底匹配，否则会出现url为/user时父元素也会被添加了red样式。

若是routerLink的值是变量的话

routerLink={{temp}}
复制代码

temp就是你的变量名