routerLinkActive trong Angular 4 không thêm lớp khi chỉ thay đổi tham số

Question

Tôi gặp sự cố với routerLinkActive ở góc 4. Tôi có cài đặt này.

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

Đó là trang tab cho một quả duy nhất. Ex: Trái cây/4 (tab general) và trái cây/4/cài đặt (tab cài đặt)

Tab navigator (FruitNav) được thiết lập như sau và nó hoạt động trong hầu hết các trường hợp:

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

Bây giờ vấn đề si: Tuyến đường hiện đang ở trái cây/4. Nếu tôi ở trong bất kỳ tab con nào hoặc thậm chí trong lớp nav chính, và gọi cho một fruitId khác, routerLinkActive sẽ không hoạt động. Ví dụ:

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

sẽ điều hướng đến trái cây/5 nhưng không ai trong số các tab sẽ được kích hoạt/chọn

Một usecase điển hình có thể là một danh sách các loại trái cây tương tự mà người dùng có thể điều hướng đến.

Có ai có giải pháp cho việc này không?

Answer 1

Tôi đã tìm ra. Cấu hình tuyến đường của tôi không được thiết lập chính xác. Tuyến 'mẹ' nên chuyển hướng đến con đường 'tab mặc định' của tôi, như thế này:

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

Sau đó, tôi đã thay đổi routerLink cho liên kết tab chung để:

<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! nó hoạt động!