单击链接时，使另一个链接处于活动状态-角度

Question

我有一个包含这些元素的侧边栏：

<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>

单击 Submenu1 时，我希望将 Home 设置为活动状态，以便在链接处于活动状态时使用我申请的 css。 我如何在 Angular5 中做到这一点？ 谢谢你。

Answer 1

使用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>