时间戳

首页 > 解决方案 > 当我使用angular2更改标签时如何保持侧栏链接处于活动状态

css - 当我使用angular2更改标签时如何保持侧栏链接处于活动状态

问题描述

我有一个侧边栏，如果我在屏幕上的第一个选项卡上，它会保持活动状态，如果我切换到第二个选项卡，则 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>

如果我在 myHealth History 选项卡中，则侧边栏将处于活动状态，如果我切换到其他 2 个选项卡，则侧边栏将不会处于活动状态

标签： cssangular

解决方案

条件是：

  1. 根据选项卡更改来区分您当前的 URL。

    ex1：http ://test.com/tab1和http://test.com/tab2

    ex2：http ://test.com/#tab1和http://test.com/#tab2

  2. 读取 url 并找到像“tab1 or tab2”这样的字符串
  3. 根据此条件添加“活动”类

推荐阅读