路由高亮是什么? 有什么好处?
当你在做一个后台管理系统, 左边是一排路由导航, 点击可以进入不同的页面, 那么这个路由所在 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 用法更新于 https://github.com/deepthan/blog-angular
来源: https://juejin.im/post/5ae3c894f265da0b83367cbe