是否可以用 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>