routerLinkActive问题

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

由于角的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属性来检查链接是否处于活动状态。如果是，那么您可以选择使用哪个类。