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
  }
];

如你所见，我有 "店铺 "和 "详情 "两个组件。细节组件可以通过点击一个简单的按钮从商店页面到达。此时，我在菜单上的活动状态正确地选择了商店项目，但当我点击细节按钮时，状态就不再是活动状态了。是否可以在菜单中保持两个组件的活动状态，即使我在另一个路径中？

下面是一个例子

https:/stackblitz.comeditparent-child-active-x6sp1e。

Answer 1

根据 Angular文档，你的appRoutes应该是这样的。

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

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