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

Question

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

app-routing.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 { }

planet-detector-routeting.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 { }

那么它工作得很好。还有一个问题。这些孩子路线分离有什么好处？

Answer 1

当路由在children属性中声明时，这意味着它们应该被呈现为该组件的子级。

因此，要渲染该路由，需要有一个

在子项中列出的路由遵循以下规则:

路由器处理这些子路由的方式有很大的不同。

路由器在ParentComponent的route route let中显示这些路由的组件，而不是在AppComponent shell的route route let中显示。