首页 > web前端 > js教程 > 正文

angular路由高亮之实现步骤详解

php中世界最好的语言
发布: 2018-05-15 09:48:28
原创
2276人浏览过

这次给大家带来angular路由高亮之实现步骤详解,angular路由高亮实现的注意事项有哪些,下面就是实战案例,一起来看一下。

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

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

也可以给routerLinkActive进行配置参数

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

复制代码 代码如下:

login

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

<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
 login {{ rla.isActive ? '激活' : '未激活'}}
</a>
登录后复制

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

非激活状态

login 未激活

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

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

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

<p routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
 <a routerLink="/user/login">login</a>
 <a routerLink="/user/reset">reset</a>
</p>
登录后复制

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

更多API用法更新于 github

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Angular5路由传值方法总结

JS做出折叠展开动画(附代码)

以上就是angular路由高亮之实现步骤详解的详细内容,更多请关注php中文网其它相关文章!

路由优化大师
路由优化大师

路由优化大师是一款及简单的路由器设置管理软件,其主要功能是一键设置优化路由、屏广告、防蹭网、路由器全面检测及高级设置等,有需要的小伙伴快来保存下载体验吧!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号