如何导航到延迟加载的模块子项？答案

【问题标题】：How do I navigate to a lazy loaded module's child?如何导航到延迟加载的模块子项？
【发布时间】：2019-08-02 23:43:02
【问题描述】：

如何导航（或设置）Angular 路由器，以便导航延迟加载模块的子模块，将其显示到不同的路由器出口。以下是我尝试过的；当加载 EventsModule 时，第一个子节点（路径：''; 事件列表）应该显示在名为“events”的路由器出口中（这有效），但是当用户点击一个事件时，它们应该被导航到第二个child (path:"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>

请帮忙！

【问题讨论】：

如果 Angular 弹出 404 错误，这意味着你使用了错误的 URL。请务必使用正确的 URL，尝试使用绝对 URL 来检查它是否有效。
您好，可以参考1h的这个问题吗：stackoverflow.com/questions/55120494/…。您将有 stackblitz 来帮助您。
@trichetriche 我尝试使用绝对路由。从我试图弄清楚出了什么问题来看，似乎延迟加载模块的子模块没有作为可能的路由加载。
您将它们声明为forChild 或forRoot 吗？

标签： angular typescript routing lazy-loading router-outlet

【解决方案1】：

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

将 EventModule 的子代替换为： [{ 路径：''，组件：EventListComponent }， {路径：'：eventUid'，组件：EventDetailsComponent}]

并从 events.component.html 中的 router-outlet 中删除了“name”属性

【讨论】：