角度2の動的ルーティングを使用して、ページリフレッシュで選択したタブを維持します。

Question

選択したタブ（タブ2を想定）をリフレッシュしようとしていますが、同じタブとそのハイライトをタブ1にロードしています。私は、動的ルーティングとブートストラップを使って、角度2の同じタブをリフレッシュするようにはなっていません。

は、ここで私は誰もが問題を解決するために私を助けることができる角度の2の新しいですご参照

<a routerLink="/tab1" class="placeholder col-xs-2 item" (click)="onMenuClick('tab1')" *ngIf="authorizationService.isTab1View"> 
      <span class="placeholderimg"><i id="tabCust" class="fa fa-users fa-menu-top" [style.color]="tab1Selected"></i></span> 
      <p class="placeholdertext">{{ 'MENU.tab1' | translate }}</p> 
     </a> 

     <a routerLink="/tab2" class="placeholder col-xs-2 item" (click)="onMenuClick('tab2')" *ngIf="authorizationService.isTab2View"> 
      <span class="placeholderimg"><i id="tabSite" class="fa fa-building-o fa-menu-top" [style.color]="tab2Selected"></i></span> 
      <p class="placeholdertext">{{ 'MENU.tab2' | translate }}</p> 
     </a> 

ための私のコードです。このようなあなたのanchorタグで

Answer 1

使用routerLinkActiveディレクティブ - active-linkはあなたのアクティブなアンカータグをカスタマイズするために使用できるCSSクラスです

<a routerLink="/tab1" routerLinkActive="active-link" class="placeholder col-xs-2 item" (click)="onMenuClick('tab1')" *ngIf="authorizationService.isTab1View"> 
    <span class="placeholderimg"><i id="tabCust" class="fa fa-users fa-menu-top" [style.color]="tab1Selected"></i></span> 
    <p class="placeholdertext">{{ 'MENU.tab1' | translate }}</p> 
</a> 

<a routerLink="/tab2" routerLinkActive="active-link" class="placeholder col-xs-2 item" (click)="onMenuClick('tab2')" *ngIf="authorizationService.isTab2View"> 
    <span class="placeholderimg"><i id="tabSite" class="fa fa-building-o fa-menu-top" [style.color]="tab2Selected"></i></span> 
    <p class="placeholdertext">{{ 'MENU.tab2' | translate }}</p> 
</a> 

。