延迟加载模块上的 Angular 子路由未加载

Question

不确定我是否做对了所有事情。但问题是:当我从延迟加载的模块导航到组件的一些子路由时，它根本不会加载。它从延迟加载模块重新加载主组件。

应用程序路由.component.ts

const routes: Routes = [
  {path: 'intel', loadChildren: () => import(`./intel/intel.module`).then(m => m.IntelModule)},
  {
    path: 'planet-detector',
    loadChildren: () => import('./planet-detector/planet-detector.module').then((m) => m.PlanetDetectorModule)
  },
  {path: '', redirectTo: 'space', pathMatch: 'full'},
  {path: '**', component: BlackHoleComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

行星探测器路由.module.ts

const routes: Routes = [
  {path: '', component: DetectorComponent, children: [
      { path: 'first', component: FirstChildComponent},
      { path: 'second', component: SecondChildComponent}
    ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PlanetDetectorRoutingModule { }

所以在上面的例子中，当你输入:' http://localhost:4200/planet-detector/first ' 它加载 DetectorComponent 组件而不是 FirstChildComponent(url 指向 ' http://localhost:4200/planet-detector/first')。

我注意到当我将 PlanetDetectorRoutingModule 更改为:

const routes: Routes = [
  { path: '', component: DetectorComponent },
  { path: 'first', component: FirstChildComponent },
  { path: 'second', component: SecondChildComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PlanetDetectorRoutingModule { }

然后它工作正常。
还有一个问题。这些 child 路线分离有什么好处？

Answer 1

当在 children 属性中声明路由时，这意味着它们应该呈现为该组件的子组件。
因此，要渲染该路线，需要有 <router-outlet>在 DetectorComponent .
child 中列出的路线遵循以下规则:

There are important differences in the way the router treats these child routes.

The router displays the components of these routes in the RouterOutlet of the ParentComponent, not in the RouterOutlet of the AppComponent shell.