angular - routerLinkActive问题

Question

所以，我在页面上有一个菜单。我有 routerLinkActive 属性，如果链接处于事件状态，该属性应该添加绿色背景。如果不活跃，它应该是灰色的。问题是，即使添加了 bg-success 类，它也不会覆盖 bg-dark 类。

我的问题是，你们知道我如何才能完成这项工作吗？我可以选择进入并修改引导文件，并从 bg-dark 中删除 "!important"，但我不想搞乱它。

也许 Angular 东西，比如routerLinkNotActive，这将允许我交换类。

<a class="list-group-item bg-dark text-light" [routerLink]="'/admin-dashboard'" routerLinkActive="bg-success" [routerLinkActiveOptions]="{exact: true}">Dashboard</a>

Answer 1

借助 Angular 的 exportAs 属性，您可以解决这个问题。幸运的是，它已经在 routerLinkActive 中了。属性:

<a 
  class="list-group-item text-light" 
  [routerLink]="'/admin-dashboard'"
  routerLinkActive
  #rla="routerLinkActive" 
  [class.bg-success]="rla.isActive" 
  [class.bg-dark]="!rla.isActive" 
  [routerLinkActiveOptions]="{exact: true}">Dashboard</a>

exportAs 允许您创建一个模板变量，该变量实际上是您要导出的类的实例。这意味着 rla instanceof RouterLinkActive 将返回 true。

在您的情况下，您可以使用该类的 isActive 属性来检查链接是否处于事件状态。如果是，那么您可以选择使用哪个类。