如何为 Angular 中的两条不同路线将菜单项标记为活动状态

Question

我正在使用 routerLinkActive 属性根据当前显示的页面更改菜单项的背景颜色。这是我的 MenuItem 组件的 HTML：

<div class="menu-item" routerLinkActive="active">
  <my-icon name="{{ iconName }}"></my-icon>
  <a routerLink="{{ routerLink }}">{{ title }}</a>
</div>

使用这个组件时，我必须传入routerLink属性，比如/home。这工作正常，唯一的问题是我希望菜单项“Home”在路线为 base_url/home 以及 base_url/ 时被标记为活动。不过我不知道如何实现。

在我的 app.module.ts 文件中，我定义了以下路由：

RouterModule.forRoot(
  [
    {path: '', component: HomeComponent},
    {path: 'home', component: HomeComponent},
    ...
  ],

因此，最初显示了 HomeComponent，但相应的菜单项未标记为活动。

我想一种解决方案可能是简单地将 / 作为我的 HomeComponent 的 routerLink 传入，然后将 [routerLinkActiveOptions]="{exact:true}" 添加到 MenuItem 组件。实际上，我已经验证它有效。这个解决方案的问题是，每当我显示我的 HomeComponent 时，我真的希望 /home 在我的 URL 中显示 - 只是为了保持一致性，毕竟它对所有其他页面都是可见的.

有人可以帮我吗？

Answer 1

The issue that I have with this solution is, that I would really like the /home to show in my URL whenever I am displaying my HomeComponent

您应该使用从默认 '' 路由到 home 路由路径的重定向。然后菜单将按预期工作以及您的上述要求始终以 /home

的形式显示 url

RouterModule.forRoot(
  [
    {path: '', redirectTo: '/home', pathMatch: 'full' },
    {path: 'home', component: HomeComponent},
    ...
  ],

Answer 2

您需要添加pathMatch

RouterModule.forRoot(
  [
    {path: '', redirectTo: 'home', pathMatch: 'full' },
    {path: 'home', component: HomeComponent},
  ],

angular routes

默认path-match策略是prefix，或者对于空路径你可以写full.

如何为 Angular 中的两条不同路线将菜单项标记为活动状态

How to mark a menu item as active for two different routes in Angular

routes

angular