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

Posted 2023-02-22

【中文标题】是否可以用 routerLinkActive 替换一个类，而不仅仅是添加一个类？

【英文标题】：Is it possible to replace a class with routerLinkActive instead of just adding a class?

【发布时间】：2019-12-02 22:44:05

【问题描述】：

我在导航栏上有一个图标，它用作指向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 指令能否以某种方式替换类而不是仅仅添加它？

【问题讨论】：

我认为该指令与blah.classList.toggle('blah blah') 等效，因此routerLinkActive="mdi-settings-outline mdi-settings" 将删除mdi-settings-outline（如果存在）并添加mdi-settings（如果不存在）。

@ChrisW。这实际上听起来也不错，并且可以工作

@ChrisW。试过了，但似乎没有正常工作

好吧，他们应该更新the docslol的第一句话。

【参考方案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>

【讨论】：

工作就像一个魅力......而且看看代码它实际上很有意义，非常感谢你

是active 还是isActive？

@ConnorsFan 实际上是isActive

@ConnorsFan 是的，你是对的。我更新了答案。谢谢。