yönlendiriciLinkActive in Angular 4 yalnızca parametre değiştiğinde sınıf ekleyemiyor

Question

Açısal 4'te routerLinkActive ile ilgili bir sorunum var. Bu kurulum var.

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

Tek bir meyve için bir sekme sayfası. Ör: meyveler/4 (genel sekme) ve meyveler/4/ayarları (ayarlar sekmesi)

sekme gezgini (FruitNav) Aşağıdaki gibi ayarlanır ve vakaların çoğunda çalışır:

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

Şimdi si problemi: Rota şu an meyvelerde/4. Çocuk sekmelerinin herhangi birinde, hatta ana nav sınıfındaysam ve başka bir meyve için çağrı yaparsam, yönlendiriciLinkActive çalışmayacaktır. Örnek:

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

meyve/5'e gidin ancak sekme hiçbiri

seçilen Tipik usecase kullanıcının gezinmek benzer meyveler bir listesi olabilir/aktif olacaktır.

Bunun için bir çözümü olan var mı?

Answer 1

Bunu çözdüm. Rota yapılandırmam doğru ayarlanmadı. 'ebeveyn' rota böyle, benim 'varsayılan sekme' rota yönlendirmesi gerekir:

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

Tada:

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

Sonra genel sekmesi bağlantıdan routerLink değişti! işe yarıyor!