Angular 笔记 RouterLinkActive

Angular 官网教程

RouterLinkActive (DIRECTIVE 指令)

当此链接指向的路由激活时，往宿主元素上添加一个 CSS 类。

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>

<!-- 设置一个或多个类 -->
<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>

<!-- 只有当 url 和此链接精确匹配时才会添加这些类 -->
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:
true}">Bob</a>

<!-- 模板变量 -->
<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive">
  Bob {{ rla.isActive ? '(already open)' : ''}}
</a>

<!-- 无论当前 url 是 '/user/jim' 还是 '/user/bob'，都会往 div 标签上添加一个 active-link 类 -->
<div routerLinkActive="active-link">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>