Question

我正在尝试在顶层组件中使用辅助路由器出口。

在我的项目中，“ PanelComponent”中有子组件，类似于“ Layout”。其背后的想法是基于url /路由将某些表单（从子组件）加载到我的“模式”中。

我有一条PanelComponent的顶级路线：

const routes: Routes = [
  {
    path: '',
    component: PanelComponent,
    children: [
      { path: 'bookings', loadChildren: () => import('./bookings/bookings.module').then(m => m.BookingsModule) },
    ]
  },
];

在PanelComponent模板中，我有：

<router-outlet name="sidebar"></router-outlet>

BookingComponent路线：

const routes: Routes = [
  { path: '', redirectTo: 'x', pathMatch: 'full' },
  { path: 'x', component: BookingsComponent, children: [
    { path: 'show/:id', component: BookingComponent },
    { path: 'new', component: BookingCreateComponent, outlet: 'sidebar' },
  ]},
];

问题是当我使用url打开网站时： http://localhost:4200/bookings/x/(show/1//sidebar:new)

然后，BookingCreateComponent的内容应该在PanelComponent内的路由器出口中呈现，但是现在正在尝试将组件加载到BookingsComponent内，这对我来说是错误的。

任何建议如何解决该问题？

将辅助路由加载到顶级组件路由器出口

0 个答案: