Angular 两个不同的路径相同的菜单项处于活动状态

Question

我的 app-component.ts:

中有一个这样的菜单

<ul>
  <li>
    <a href="#" routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
  </li>
  <li>
    <a href="#" routerLink="/shop" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Shop</a>
  </li>

</ul>
<router-outlet></router-outlet>

使用像这样的路由文件

export const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'shop',
    component: ChildComponent
  },
  {
    path: 'details',
    component: DetailComponent
  }
];

如您所见，我有 "shop" 和 "details" 组件。通过单击一个简单的按钮，可以从商店页面访问详细信息组件。此刻，我在菜单上的活动状态正确选择了商店商品，但是当我单击详细信息按钮时，状态不再处于活动状态。即使我在另一条路线上，是否可以在两个组件的菜单中保持活动状态？

这是一个例子

https://stackblitz.com/edit/parent-child-active-x6sp1e

Answer 1

根据 Angular Documentation，您的 appRoutes 应该是这样的：

const routes: Routes = [
{ 
 path: 'shop',
 component: ChildComponent, 
  children: [
    {
      path: 'details', 
      component: DetailComponent
    }
   ] 
 }

但是，要在这里取得成功，您需要有两个 <router-outlet></router-outlet>。一个在你的家里，另一个在你的商店里。

Angular 两个不同的路径相同的菜单项处于活动状态

Angular two different paths same menu item active

angular

typescript

angular2-routing

menuitem