创建具有多个父级的子页面

Question

我想在 Angular 应用程序中创建一个导航，我可以在其中从多个“父”页面访问同一个页面，并让导航知道它来自哪个页面。

我在导航中使用routerLinkActive="active"。我有两个页面（收藏夹，所有用户）显示用户列表。用户有一个详细信息页面，您可以使用 users/userId 导航到该页面。

我想做的是，当从“收藏夹”列表中单击用户详细信息链接时，“活动”导航停留在“收藏夹”菜单按钮上，当我从所有用户中点击时，它会停留在所有用户

这就是我当前的路线配置方式

const routes: Routes = [
{
  path: 'favorites',
  component: FavoritesComponent
},
{
  path: 'all',
  component: AllUsersComponent
},
{
  path: 'user/:id',
  component: UserDetailComponent,
}

这就是我的路线当前的配置方式，显然，当我导航到 user/id 页面时，favorites 和 all 在我的导航栏中都不是“活动的”。

Answer 1

您可以在每个主路由下重复使用相同的组件作为子路由，即favorites 和all。这里的关键是定义一个空路由路径，该路径指向该路由的主要组件，然后创建一个将属于主路由的详细路由。您的路线配置应如下所示：

const appRoutes: Routes = [
  {
    path: 'favorites',
    children: [
      {
        path: '',
        component: FavoritesComponent
      },
      {
        path: 'user/:id',
        component: UserDetailComponent,
      }
    ]
  },
  {
    path: 'all',
    children: [
      {
        path: '',
        component: AllUsersComponent
      },
      {
        path: 'user/:id',
        component: UserDetailComponent,
      }
    ]
  },
  {
    path: 'user/:id',
    component: UserDetailComponent,
  },
  { path: '**', redirectTo: "/all" }
];

通过上述配置，favorites 和 all 链接将按照您的意愿运行。

StackBlitz