如何將 routerLinkActive 指令應用於 angular 中的 this.router.navigate(...) 方法？

Question

我們可以將 routerLinkActive 指令與 [routerLink] 一起簡單地應用為：

<a [routerLink]="'/profile'" routerLinkActive="active"> My Profile </a>

當然是標簽<a></a> 。 但是如果我們想按以下方式導航以執行操作：.ts 文件：

 navigateToMyProfile(): void { this.router.navigate(['/profile']); }

模板是：

<mat-list-item (click)="navigateToMyProfile()">

我們在哪里可以為上述方法應用 routerLinkActive 指令？ 最好的祝福

Answer 1

請改用mat-list-item 作為屬性。

將mat-nav-list標簽用於導航列表（即具有錨標簽的列表）。

簡單的導航列表可以直接在錨標簽元素上使用mat-list-item屬性

<mat-nav-list>
  <a mat-list-item routerLink="/profile" routerLinkActive="active">My Profile</a>
</mat-nav-list>