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