Angular 4中的路由，使活动链接背景颜色更改答案

【问题标题】：Routing in Angular 4, make active Link background color changeAngular 4中的路由，使活动链接背景颜色更改
【发布时间】：2018-01-24 22:50:54
【问题描述】：

我有一个这样的侧边栏：

        <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" ><li class="nav-item side">
            <a class="nav-link" href routerLinkActive="active" routerLink="">Home <span class="sr-only">(current)</span></a>
        </li>             
        <ul class="sub-menu collapse" id="home">

              <li class="nav-item list-unstyled"><a class="nav-link" href  routerLink="home/submenu-1">Submenu1</a></li>
              <li class="nav-item list-unstyled"><a class="nav-link" href  routerLink="home/submenu-2">Submenu2/a></li>
          </ul>
        <li class="nav-item side">
            <a class="nav-link" routerLink="firstOption">First Option</a>
         </li>
         <li class="nav-item side">
             <a class="nav-link"href routerLinkActive="active" routerLink="history">Second Option</a>
         </li>

我是如何做到的，当我点击 FirstOption 时，FirstOption 的背景颜色会发生变化，表明它处于活动状态。因为我可以浏览选项，所以当列表处于活动状态时我无法更改背景颜色。另外，我希望第一个主页的子菜单在我打开 submenu1 或 submenu2 时保持打开状态。

谢谢。

【问题讨论】：

首先删除属性“href”，没有必要。如果所有定义正确的活动链接都应该获得类“活动”：routerLinkActive =“活动”
所以我应该在每个锚标签上都有 routerLinkActive 吗？然后将我的 css 定义为：.nav-item .active{ background-color:red;} 它应该可以工作吗？
正是...这就是你必须做的
谢谢，它确实有效，但问题是主页（第一个链接）始终处于活动状态。当我点击其他人时，他们会改变背景，除了第一个..
使用[routerLinkActiveOptions]="{exact: true}" 帮助解决了这个问题！谢谢！

标签： angular angular5

【解决方案1】：

使用它来改变背景颜色的下拉菜单

.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
  color: #fff;
  text-decoration: none;
  background-color: #00a65a;
  outline: 0;
}

【讨论】：