延遲加載模塊上的 Angular 子路由未加載

Question

不確定我做的一切是否正確。 但問題是：當我從延遲加載的模塊導航到組件的某些子路由時，它根本不會加載。 它從 Lazy Loaded Module 重新加載 home 組件。

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 { }

行星探測器-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 ' 它加載 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 屬性中聲明路由時，這意味着它們應該作為該組件的子組件呈現。

因此，要渲染該路由， DetectorComponent需要有一個<router-outlet> 。

在 children 中列出的路由遵循這個規則：

路由器處理這些子路由的方式存在重要差異。

路由器將這些路由的組件顯示在 ParentComponent 的 RouterOutlet 中，而不是在 AppComponent shell 的 RouterOutlet 中。