AngularのRouterLinkActiveOptionsについて

こんにちは！kossyです！

さて、今回はAngularRouterのOptionのひとつであるRouterLinkActiveOptionsについて、
ブログに残してみたいと思います。

環境
node 12.13.1
npm 6.14.4
Angular 8.0.6

routerLinkActiveとは？
routerLinkActiveディレクティブは、routerLinkで指定したURLと現在のURLが一致した時に指定したクラス名を付与できます。

参考: Angular 日本語ドキュメンテーション

routerLinkActiveOptionsのexactをtrueとすることで、routerLinkと現在のURLが完全に一致した時に、activeクラスを付与できます。

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true" class="mat-elevation-z20"> <!-- can use mode="push or over"-->
    <mat-nav-list>
      <mat-list-item routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        トップ
      </mat-list-item>
      <mat-list-item routerLink="/area/edit" routerLinkActive="active">
        編集
      </mat-list-item>

      <mat-divider></mat-divider>
      <h3 matSubheader>天気予報</h3>
      <mat-list-item *ngFor="let pref of (areasObservable | async)" [routerLink]="['/forecast', pref.city]" routerLinkActive="active">
        {{pref.label}}
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

/ にアクセスした場合

/area/edit にアクセスした場合

RouterLinkActiveを使えば、URLに応じて動的にクラスを切り替えることが簡単に実現できます。

参考にさせていただいた書籍
Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク - インプレスブックス