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

Angular two different paths same menu item active

我的 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

根据 Angular Documentation,您的 appRoutes 应该是这样的:

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

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