Angular 5 RouterLinkActive的用法

如果链接为当前路由（此时链接为激活状态），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>

可以在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：

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

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

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

秒客网