маршрутизация пути «/» для компонентного и подсветки пункта меню на основе routerLinkActive

Question

я установки следующих маршрутов для RouterModule на app.module.ts:

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, выделяя работы, как и ожидалось (и изменяет URL, а).

Что рекомендуемый способ сделать эту работу? Есть ли какой-либо выход из этого окна, чтобы выполнить это или какое-либо обходное решение необходимо?

Answer 1

Использование

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

вместо

{ path: '', component: InboxComponent }