Question

因此，我在页面上有一个菜单。我有routerLinkActive属性，如果该链接处于活动状态，则应该添加绿色背景。如果未激活，则应为灰色。问题是，即使添加了bg-success类，它也不会覆盖bg-dark类。

我的问题是，你们对我如何做这项工作有任何想法吗？我可以选择进入并修改引导程序文件，并从"!important"中删除bg-dark，但是我不想弄乱它。

也许像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属性来检查链接是否处于活动状态。如果是这样，则可以选择要使用的类。

routerLinkActive问题

1 个答案: