将路径“/”路由到组件并基于 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：

但是，如果我 select 映射到 /inbox 的菜单项，突出显示会按预期工作（并且也会更改 url）。

完成这项工作的推荐方法是什么？是否有开箱即用的方法来完成此操作或是否需要任何解决方法？

Answer 1

使用

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

而不是

{ path: '', component: InboxComponent }

将路径“/”路由到组件并基于 routerLinkActive 突出显示菜单项

Routing path '/' to Component and highlighting menu item based on routerLinkActive

url-routing

angular