Angular 4中如何为激活状态的IcoFont链接添加颜色？

我来帮你搞定这个问题！在Angular 4里给激活状态的IcoFont图标设置颜色，其实可以借助Angular Router自带的routerLinkActive指令轻松实现，步骤如下：

1. 给导航链接添加激活类指令 #

首先，修改你的导航链接代码，给<a>标签加上routerLinkActive指令，指定一个自定义的激活类名（比如active-icon）。如果需要严格匹配路由（避免子路由触发父导航的激活状态），还可以加上[routerLinkActiveOptions]="{ exact: true }"。

修改后的代码片段：

<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"
           routerLinkActive="active-icon"
           [routerLinkActiveOptions]="{ exact: true }">
          <i class="icofont icofont-chart-pie-alt"></i>
        </a>
        <div class="slide"></div>
      </li>
      <!-- 其他导航项也可以照此方式添加 -->
    </ul>
  </nav>
</div>

2. 编写CSS样式设置激活颜色 #

接下来，在你的项目CSS文件（比如全局样式styles.css或者组件专属的CSS文件）中，针对刚才定义的active-icon类下的IcoFont图标设置颜色：

/* 基础激活样式：设置图标颜色 */
.active-icon .icofont {
  color: #ff5722; /* 替换成你需要的颜色，比如蓝色#2196F3 */
}

/* 可选：如果需要更精确的范围（仅针对这个导航栏），可以加上父类选择器 */
.filter-bar .navbar-nav .active-icon .icofont {
  color: #ff5722;
}

这样设置后，当这个导航链接对应的路由处于激活状态时，Angular会自动给<a>标签加上active-icon类，对应的IcoFont图标就会变成你设置的颜色啦！

内容的提问来源于stack exchange，提问作者Asif Ahmed