Angular 5 RouterLinkActive的用法

时间:2023-05-12 17:42:31

如果链接为当前路由(此时链接为激活状态),RouterLinkActive指令可以让我们给链接元素添加css的class样式。

父路由连接激活

默认情况下,当路由为链接的父路由或者完全匹配链接,链接都会认为是激活的状态。

<a routerLink="/a/b" routerLinkActive="active">B链接</a>

所以,示例里当路由为“/a”和“/a/b”class active都会被添加。

完全匹配激活

如果限定当前路由需要和链接路径完全匹配才激活,可以在routerLinkActiveOptions属性添加exact: true。

<a routerLink="/a/b" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">B链接</a>

添加多个class

可以在routerLinkActive添加多个class:

<a routerLink="/a/b" routerLinkActive="class1 class2">B链接</a>
<a routerLink="/a/b" [routerLinkActive]="['class1', 'class2']">B链接</a>

需要注意上面两种赋值方式的区别:

  • routerLinkActive="class1 class2":这种是直接赋值字符串,这和普通设置class值class="class1 class2"是一样的。
  • [routerLinkActive]="['class1','class2']":这是angular的绑定表达式,双引号里可以是一个在组件里定义的变量,这里直接使用了数组表达式。

父元素设置routerLinkActive

如果有多个链接需要设置routerLinkActive,可以统一在这组链接的父元素设置routerLinkActive:

<div routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/a/b">B链接</a>
<a routerLink="/a/c">C链接</a>
</div>

调用RouterLinkActive的api

可以把RouterLinkActive实例赋值给一个变量,然后就可以通过变量来调用RouterLinkActive的api:

<a routerLink="/a/b" routerLinkActive #rla="routerLinkActive">
B链接 {{ rla.isActive ? '(当前)' : ''}}
</a>