当只有参数发生变化时，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> 

田田！有用！