创建一个包含多个 parent 的 child 页面

Question

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

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

导航到该页面

我想要做的是，当从 "Favorites" 列表中单击用户详细信息 link 时，"active" 导航保留在 "Favorites" 菜单上按钮，当我点击所有用户时，它停留在所有用户

这是我的路由当前配置的方式

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

这是我当前配置的路线，显然，当我导航到 user/id 页面时，favorites 和 all 都不在我的导航中 "active"酒吧.

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 链接将按照您的意愿运行。

创建一个包含多个 parent 的 child 页面

Create a child page with multiple parent

typescript

angular

angular-router

StackBlitz