當只有參數發生變化時，angularLink 4中的routerLinkActive不會添加類

Question

我在angular 4中有routerLinkActive的問題。我有這種設置。

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

這是一個單一水果的標籤頁。例如：水果/ 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> 

現在的問題：路線目前在水果/ 4。如果我處於任何子選項卡內，甚至在主導航類中，並調用另一個fruitId，則routerLinkActive將不起作用。例如：

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

將導航到水果/ 5，但沒有任何標籤將被激活/選擇

一個典型的用例可能是相似的水果，用戶能夠瀏覽列表。

有沒有人有解決方案？

Answer 1

我想通了。我的路由配置沒有正確設置。 的「父」的路線應該重定向到我的默認選項卡「路線，像這樣：

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

然後，我改變了routerLink的常規選項卡鏈接：

<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> 

田田！有用！