Как сохранить ссылку на боковую панель, когда я меняю вкладки с помощью 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

Условие:

1. Различаются ваши текущие URL-адреса в зависимости от изменения табуляции.

   ex1: http://test.com/tab1 и http://test.com/tab2

   ex2: http://test.com/#tab1 и http://test.com/#tab2

2. Прочитайте URL и найдите строку типа "tab1 или tab2"
3. добавьте класс "Active" на основе этого условия

Answer 2

Вы можете проверить текущую активную ссылку в компоненте боковой панели.

Боковая панель 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, поэтому возможна опечатка или синтетическая ошибка.Пожалуйста, исправьте себя.

Answer 3

Использование [ngClass] = "{'active' : true}" в теге.