[英]Angular child route on Lazy Loaded module does not load
不确定我做的一切是否正确。 但问题是:当我从延迟加载的模块导航到组件的某些子路由时,它根本不会加载。 它从 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 { }
然后它工作正常。 还有一个问题。 这些孩子路线分离有什么好处?
在 children 属性中声明路由时,这意味着它们应该作为该组件的子组件呈现。
因此,要渲染该路由, DetectorComponent
需要有一个<router-outlet>
。
在 children 中列出的路由遵循这个规则:
路由器处理这些子路由的方式存在重要差异。
路由器将这些路由的组件显示在 ParentComponent 的 RouterOutlet 中,而不是在 AppComponent shell 的 RouterOutlet 中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.