각도 5의 부트 스트랩 : 페이지로 돌아갈 때 선택된 탭을 활성화하는 방법

Question

내 Angular 2 응용 프로그램에서 bootstrap nav-pills를 사용하고 있습니다. 사용자가 다른 구성 요소에서이 페이지로 돌아올 때 선택한 탭을 활성 탭으로 표시하려고합니다. 따라서 사용자는이 구성 요소에서 다른 구성 요소로 이동 한 다음 다시 여기로 돌아옵니다. 즉, 사용자가 선택한 동일한 탭을 보길 원할 때입니다. [ngClass]를 사용하여 활성 탭을 설정하면 탭이 제대로 작동하지 않습니다 - 알약은 작동하지만 탭 내용은 변경되지 않습니다.

코드 :

<ul class="nav nav-pills nav-justified"> <li [ngClass]="{'active': 'p' == activeTab }" (click)="activeTab = 'p';"><a data-toggle="pill" href="#personal"><span class="fa fa-user fa-icon-right-margin-small"></span> Personal</a></li> <li [ngClass]="{'active': 'g' == activeTab }" (click)="activeTab = 'g';"><a data-toggle="pill" href="#group"><span class="fa fa-users fa-icon-right-margin-small"></span> Group</a></li> </ul>

또한, 사용자는이 페이지이며, 첫 번째, 개인 탭의 내용이 활성 보여주는 유지에 돌아 오면. 활성 탭이 로컬 저장소에 저장되는 몇 가지 솔루션을 보았습니다. js가 아닌 답변을받을 수 있습니까? 감사. 부트 스트랩 버전 - 3.3.7, Angular - 5

또한 li.l 요소의 ID를 <li #g ... 및 this.g.nativeElement.click(); // if active tab = 'g', g = group으로 사용하여 li 요소의 ids를 설정하여 tab의 click() 이벤트를 수동으로 트리거하려고 시도했지만 그 이후 페이지가 렌더링 될 때, 첫 번째 탭을 보여 주었고, 이는 선택된 것으로 만 "개인"입니다.

Answer 1

Angular RouterModule을 사용하는 경우 routerLink 및 routerLinkActive 속성을 사용할 수 있습니다. 이렇게하면 이름이 지정된 클래스를 간단하고 자동으로 지정하여 현재 활성 상태 인 routerLink에 추가 할 수 있습니다.

<ul class="nav nav-pills nav-justified"> 
    <li class="nav-item"> 
     <a class="nav-link" routerLink="personal" routerLinkActive="active"> 
      <span class="fa fa-user fa-icon-right-margin-small"></span> Personal 
     </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" routerLink="group" routerLinkActive="active"> 
      <span class="fa fa-users fa-icon-right-margin-small"></span> Group 
     </a> 
    </li> 
</ul> 

코드의 기능 요소를 변경하지 않으려 고 노력했습니다. 희망이 도움이됩니다.