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

Question

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

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-routing.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' it loads DetectorComponent component instead of FirstChildComponent (url points to '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 { }

然后它工作正常。还有一个问题。这些children route separation有什么好处？

Answer 1

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

因此要渲染该路线，DetectorComponent 中需要有一个 <router-outlet>。

儿童中列出的路线遵循此规则：

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.

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

Angular child route on Lazy Loaded module does not load

lazy-loading

angular