Angular 单击链接时，激活另一个链接-角度

我有一个包含以下元素的侧栏：

<ul class="nav nav-pills flex-column">
      <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" >
          <a class="nav-link"  routerLinkActive="active" routerLink="/home" [routerLinkActiveOptions]="{exact: true}">Home </a> </li>
     <ul class="sub-menu collapse" id="home">

          <li class="nav-item list-unstyled"><a class="nav-link"  routerLinkActive="active"  routerLink="/home/submenu1">Submenu1</a></li>
          <li class="nav-item list-unstyled"><a class="nav-link"   routerLinkActive="active"  routerLink="/home/submenu2">Submenu2</a></li>

      </ul>


      <li class="nav-item side">
          <a class="nav-link"  routerLinkActive="active" routerLink="/contact">Contact</a>
      </li>

  </ul>

家

子菜单1
子菜单2


接触

当单击子菜单1时，我希望Home设置为active，这样当链接处于活动状态时，它将采用我应用的css。 我如何在Angular5中实现这一点？

---

多谢各位

使用

ngClass

并在您的组件中使用代码检查路线是否是主路线的一部分。例如：

let isHomeActive = Router.url.startsWith("/home/");
this.homeClasses = {
    "active": isHomeActive,
    "nav-link": true
}

<a [ngClass]="homeClasses"  routerLinkActive="active" routerLink="/home" [routerLinkActiveOptions]="{exact: true}">Home </a> </li>

让isHomeActive=Router.url.startsWith（“/home/”）；
此参数为0.homeClasses={
“主动”：我是主动的，
“导航链接”：正确
}
家

请发布您迄今为止尝试过的内容嘿！非常感谢你！不过有一个问题，我在构造函数中导入了路由器“private Router:Router”。当我写这封信的时候，让我变得活跃。。。AppComponent中不存在this.homeClasses I get属性上的代码