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>

当点击子菜单1时，我希望将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>

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

1 个答案: