角度5のブートストラップ：ページに戻るときに選択したタブをアクティブにする方法

Question

私はAngular 2アプリケーションでブートストラップナビピルを使用しています。ユーザーが別のコンポーネントからこのページに戻ったときに、選択したタブをアクティブなタブとして表示したい。ユーザーはこのコンポーネントから別のコンポーネントに移動してからここに戻ります。これは、ユーザーが選択したタブと同じタブをユーザーに表示させたい場合です。 [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>

また、ユーザーがこのページであり、最初の1、個人 タブのコンテンツは、アクティブとして表示し続けるに戻ったとき。私はアクティブなタブがローカルストレージに保存されているいくつかのjsソリューションを見た。 js以外の回答を得ることはできますか？ありがとう。ブートストラップバージョン - 3.3.7、角度 - 5

また、li要素のidを＃で設定することで、タブのclick（）イベントを手動でトリガーしようとしましたが、＃内に＃を含めると<li #g ...とthis.g.nativeElement.click(); // if active tab = 'g', g = groupになりました。ページがレンダリングされたときに、最初のタブが表示されました。これは選択された「個人」だけです。

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> 

コードの機能要素を変更しないようにしました。お役に立てれば。