css - 当我的链接(icofont)在 4 中处于事件 Angular 时，如何添加颜色？

Question

<div>
  <div class="col-xl-12 col-lg-12  filter-bar">
    <nav class="navbar navbar-light bg-faded m-b-30">
      <ul class="nav navbar-nav pull-right" >
        <li class="nav-item">
          <a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/dashboard']" role="tab" aria-expanded="false" ngbTooltip="Dashboard"><i class="icofont icofont-chart-pie-alt"></i></a>
          <div class="slide"></div>
        </li>
        <li class="nav-item">
          <a class="nav-link icon-list-demo active" data-toggle="tab" [routerLink]="['/franchise/customer/details/users']" role="tab" aria-expanded="false" ngbTooltip="Users"><i class="icofont icofont-users-alt-5"></i></a>
          <div class="slide"></div>
        </li>
        <li class="nav-item ">
          <a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/cabinets']" role="tab" aria-expanded="false" ngbTooltip="Cabinets"><i class="icofont icofont-cubes"></i></a>
          <div class="slide"></div>
        </li>
        <li class="nav-item">
          <a class="nav-link icon-list-demo" data-toggle="tab" [routerLink]="['/franchise/customer/details/inventory']" role="tab" aria-expanded="true" ngbTooltip="Inventory"><i class="icofont icofont-card"></i></a>
          <div class="slide"></div>
        </li>
      </ul>
    </nav>
  </div>
</div>

我的CSS

.navbar-light .navbar-nav > .active > a > i,{
color: #64b0f2;
background-color: transparent;
}

如何突出显示 icofont，当它处于事件状态时，正如您在上面看到的，我的链接中有 icofont，当它处于事件状态时我无法更改它的颜色

Answer 1

当链接处于事件状态时，angular 4 路由器提供了一种添加类的方法， 这是例子

<a routerLink="/link" routerLinkActive="active">link</a>

现在当链接路由出现时，它会自动在 anchor 标签中添加事件类，现在你可以用它做你想做的事了，