是否可以用 routerLinkActive 替换一个类，而不仅仅是添加一个类？

Question

我的导航栏上有一个图标，用作指向

admin

路线的链接，我希望当我位于该特定路线上时更改此图标，为此我可以将

mdi-settings-outline

类替换为

mdi-settings

，这将显示同一图标的填充版本。

<li class="nav-item">
    <a routerLink="/admin" routerLinkActive="mdi-settings" class="nav-link mdi mdi-settings-outline"></a>
</li>

但是，常规

routerLinkActive

指令只会将 mdi-settings 类添加到链接中，这不会产生所需的结果。 routerLinkActive 指令可以以某种方式

替换

类而不是仅仅添加它吗？

Answer 1

routerLinkActive

导出一些可在模板中使用的属性。您可以通过将指令分配给模板变量来访问 API。这是通过添加

#link="routerLinkActive"

来完成的，其中“link”是变量的名称。然后您可以使用指令的属性，这些属性在 API 文档中定义。

https://angular.io/api/router/RouterLinkActive#properties

<li class="nav-item">
    <a routerLink="/admin" 
       routerLinkActive="mdi-settings"
       #link="routerLinkActive"
       class="nav-link mdi"
       [class.mdi-settings-outline]="!link.isActive"
    ></a>
</li>

Answer 2

    <a mat-list-item
       [routerLinkActive]="['']"
       [routerLinkActiveOptions]="{ exact: true }"
       #reportsLink="routerLinkActive"
       [ngClass]="reportsLink.isActive ? 'route-active': 'route-inactive'"
       [routerLink]="['/reports']"
       title="Reports">
    </a>
    <a mat-list-item
       [routerLinkActive]="['']"
       [routerLinkActiveOptions]="{ exact: true }"
       #notificationsLink="routerLinkActive"
       [ngClass]="notificationsLink.isActive ? 'route-active': 'route-inactive'"
       [routerLink]="['/notifications']"
       title="Notifications">
    </a>

Answer 3