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.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>。一个在您家中，另一个在您店中。

有角度的两条不同路径同一菜单项处于活动状态

1 个答案: