Question

如何导航（或设置）Angular路由器，以便导航延迟加载的模块的子节点，并将其显示在其他路由器插座上。下面是我尝试过的；当加载EventsModule时，第一个子项（路径：“；事件列表”）应显示在名为“ events”的路由器出口中（此方法有效），但是当用户单击事件时，应将其导航到第二个子项（路径）。子（路径：“ eventUid”）和事件详细信息组件应显示，而不是事件列表。 Angular无法识别此路径（例如“ companyName / events / eventId”），并重新路由到404页面。

app.module.ts

  const appRoutes: Routes = [
      { path: ':company/events', loadChildren: './main/events/events.module#EventsModule' },
      ...
    ];

app.component.html

<router-outlet></router-outlet>

events.module.ts

const routes: Routes = [
  {
    path: '',
    component: EventsComponent,
    canActivate: [AuthenticatedGuard, ActiveGuard],
    children: [
      { path: '', component: EventListComponent, outlet: 'events' },
      { path: ':eventUid', component: EventDetailsComponent, outlet: 'events' }
    ]
  }
];

events.component.html

<nav>...</nav>
<router-outlet name="events"></router-outlet>

请帮助！

Answer 1

所以，我找到了解决方法：

将EventModule的子代替换为： [{path：''，component：EventListComponent}， {path：'：eventUid'，component：EventDetailsComponent}]

并从events.component.html

中的路由器插座中删除了“名称”属性

如何导航到延迟加载的模块的子级？

1 个答案: