路由路径＆＃39; /＆＃39;组件并突出显示基于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：

但是，如果我选择映射到parent="MyButton"的菜单项，则突出显示按预期工作（并更改网址）。

推荐的方法是什么？是否有任何方法可以实现这一目标或是否需要任何解决方法？

Answer 1

使用

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

而不是

{ path: '', component: InboxComponent }