路由路徑「/」到分量，突出菜單項基於routerLinkActive

Question

我設置上app.module.ts以下路線RouterModule：

RouterModule.forRoot([ 
    { path: 'inbox', component: InboxComponent }, 
    { path: 'report/request', component: RequestReportComponent }, 
    { path: 'report/create', component: CreateReportComponent }, 
    { path: '', component: InboxComponent } 
]) 

和我打印出我用下面的模板菜單：

<div *ngFor="let item of menuItems"> 
    <li routerLinkActive="active"> 
     <a [routerLink]="item.href"> 
      <i class="{{ item.iconClasses }}"></i> 
      <span class="menu-item-key"> 
       {{ item.name }} 
      </span> 
     </a> 
    </li> 
</div> 

因此，當我使用默認路徑/打開頁面時，它正確映射到默認組件，但<a>標記突出顯示不起作用，因爲它可能期望它匹配/inbox明確：

不過，如果我選擇映射到/inbox，突出按預期工作（並更改網址爲好）的菜單項。

什麼，使這項工作是推薦的方式？有沒有什麼方法可以實現這一目標，或者有任何必要的解決方法？

Answer 1

使用

{ path: '', pathMatch: 'full', redirectTo: 'inbox' } 

代替

{ path: '', component: InboxComponent }