変更アクティブなタブrouter.navigateが、私は次のコードを使用して変更するには、アクティブなタブを取得することができますブートストラップ4との角度2を使用してい

Question

を使用している：

navbar.component.html

を

<nav class="navbar navbar-fixed-top navbar-light bg-faded"> 
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navbar"> 
    &#9776; 
    </button> 
    <div class="collapse navbar-toggleable-xs" id="navbar"> 
    <div class="container"> 
    <a class="navbar-brand" [routerLink]="['']">My App</a> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: 
true}"> 
     <a class="nav-link" [routerLink]="['']">Home<span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
     <a class="nav-link" [routerLink]="['/about']">About</a> 
     </li> 
     <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"> 
     <a class="nav-link" [routerLink]="['/example']">Example</a> 
     </li>  
    </ul> 
    </div> 
    </div> 
</nav> 

ライン：

[routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" 

は、現在アクティブなタブに変更することでうまく動作しますが、私のようなものを使用してコンポーネントに移動するとき：

this.router.navigate(['']); 

アクティブなタブは変更されません。上記のようにナビゲートするときにアクティブなタブを変更する方法はありますか？

Answer 1

基本的には、サービスでハイライトを作り、URLが特定の状態になったときにそのサービスを呼び出してスタイルを適用したいとします。これは、ここで私のplunkerある

this.router.url === '/myroute'

を使用して行われます。リンクまたはボタンを使用するかどうかにかかわらず、アクティブなタブが変更されることに注意してください。ボタンは、あなたが質問で尋ねたようなthis.router.navigate(['']);を使用しています