如何将 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>