引数4のrouterLinkActiveは、パラメータが変更されたときにクラスを追加しません。

Question

角度4のrouterLinkActiveに問題があります。

export const FruitRoutes = [ 
    { 
     path: 'fruits/:id', component: FruiteNav, 
     children: [ 
      {path: '', component: FruitGeneral}, 
      {path: 'settings', component: FruitSettings} 
     ] 
    } 
]; 

1つの果物のタブページです。例：果物/ 4（一般タブ）と果物/ 4 /設定（設定タブ）

タブナビゲータ（FruitNav）は次のように設定され、それはほとんどの場合に動作します：

<ul class="nav nav-tabs"> 
     <li class="nav-item"> 
      <a [routerLink]="['/fruits', fruitId]" class="nav-link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">General</a> 
      </li> 
      <li class="nav-item"> 
       <a [routerLink]="['/fruits', fruitId,'settings']" class="nav-link" routerLinkActive="active">Settings</a> 
      </li> 
     </ul> 

    <router-outlet></router-outlet> 

今si問題：ルートは現在フルーツ/ 4です。私が子タブの中にいても、メインnavクラスであっても、別のfruitIdを呼び出すと、routerLinkActiveは動作しません。例：一般的なユースケースは、ユーザがナビゲートする可能性が類似した果物のリストとすることができる選択/

を

<a style="color:#fff" [routerLink]="['/fruits', 5,'settings']" class="nav-link">Test</a> 

果実/ 5に移動しますが、タブのいずれもアクティブでないであろう。

誰にでも解決策がありますか？

Answer 1

私はそれを理解しました。私のルート設定が正しく設定されていませんでした。 「親」のルートは、このように、私のデフォルトのタブ "ルートにリダイレクトする必要があります。

<ul class="nav nav-tabs"> 
     <li class="nav-item"> 
      <a [routerLink]="['/fruits', fruitId,'general']" class="nav-link" routerLinkActive="active">General</a> 
      </li> 
      <li class="nav-item"> 
       <a [routerLink]="['/fruits', fruitId,'settings']" class="nav-link" routerLinkActive="active">Settings</a> 
      </li> 
     </ul> 

    <router-outlet></router-outlet> 

多田：

export const FruitRoutes = [ 
    { 
     path: 'fruits/:id', component: FruiteNav, 
     children: [ 
      {path:'',redirectTo: 'general',pathMatch: 'full'}, 
      {path: 'general', component: FruitGeneral}, 
      {path: 'settings', component: FruitSettings} 
     ] 
    } 
]; 

は、それから私は、[全般]タブのリンクのためのrouterLinkを変更しました！できます！