css - 当我使用 angular2 更改选项卡时如何保持侧边栏链接处于事件状态

Question

我有一个侧边栏，如果我在屏幕上的第一个选项卡上，它会保持事件状态，如果我切换到第二个选项卡，则 url 会更改并且侧边栏标签将不会处于事件状态。 这怎么能解决。请帮忙。

HTML:

边栏代码:

 <a routerLink="/my-health/my-health-history" [ngClass] = "{'active' : true}" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="list-group-item list-group-item-action justify-content-between"
        id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
        <span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
        </span>
      </a>

TAbs 代码在点击侧边栏链接时重定向到页面:

<div class="myhealth mt7">
  <ul class="nav nav-tabs menu">
    <li>
      <a class="active-link" routerLink="/my-health/my-health-history" routerLinkActive="active-link"
        [routerLinkActiveOptions]="{exact: true}">myHealthHistory
      </a>
    </li>
    <li>
      <a routerLink="/my-health/my-lifestyle" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myLifeStyle
      </a>
    </li>
    <li>
      <a routerLink="/my-health/my-family-health-history" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myFamilyHistory
      </a>
    </li>
  </ul>
</div>

如果我在“我的健康历史”选项卡中，那么侧栏将处于事件状态，如果我切换到其他 2 个选项卡，那么侧栏将不会处于事件状态

Answer 1

在标签中使用 [ngClass] = "{'active' : true}"。