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

Question

我在导航栏上有一个图标，用作 link 到 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 到 link，而不会得到想要的结果。 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>

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

Is it possible to replace a class with routerLinkActive instead of just adding a class?

css

angular

angular2-directives

angular-router