Question

我有一个侧边栏，如果im在屏幕上的第一个标签上，则该边栏将保持活动状态；如果我切换到第二个标签，则网址会更改，并且侧边栏标签将不会处于活动状态。这怎么解决。请帮忙。

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>

通过单击侧边栏链接将Tab标签重定向到页面：

<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历史记录”选项卡中，则侧边栏将处于活动状态，如果我移至其他2个选项卡，则侧边栏将不会处于活动状态

Answer 1

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

Answer 2

条件是：

根据选项卡的更改来区别您当前的URL。

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

ex2：http://test.com/#tab1和http://test.com/#tab2
读取url并找到类似“ tab1或tab2”的字符串
根据这种情况添加“活动”类

Answer 3

您可以在侧边栏组件中检查当前的活动链接。

侧边栏html

<a routerLinkActive="active-link" [ngClass]="{'active-link': isActive()}" 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>

侧边栏ts

 constructor(private router:Router) {
  }

 isActive(){
     return ["/my-health/my-health-history","/my-health/my-lifestyle","/my-health/my-family-health-history"].includes(this.router.url);
 }

注意：该代码直接写到Stackoverflow编辑器中，因此可能存在拼写错误或语法错误。请纠正自己。

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

3 个答案:

侧边栏html

侧边栏ts