是否可以用 routerLinkActive 替换 class 而不是仅仅添加 class？

Question

我在导航栏上有一个图标，用作admin路线的链接，我希望当我在该特定路线上时更改此图标，为此我可以将mdi-settings-outline class 替换为mdi-settings ，它将显示同一图标的填充版本。

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

然而，常规的routerLinkActive指令只会将mdi-settings class 添加到链接，这不会有预期的结果。 routerLinkActive 指令能否以某种方式替换class 而不是仅仅添加它？

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>