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

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 文档，你的 appRoutes 应该是这样的：

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

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