Angular 组件未使用延迟加载（路由器子级）加载标题布局答案

【问题标题】：Angular component not loading header layout with Lazyloading (Router Children)Angular 组件未使用延迟加载（路由器子级）加载标题布局
【发布时间】：2018-11-22 13:57:19
【问题描述】：

我正在尝试在子路由上实现延迟加载。我能够延迟加载具有多个组件（DetailComponent、SearchCardComponent 等）的 HomeModule，这些组件位于页眉页脚布局内部。

但是当我点击 SearchComponent 链接时，html 会正确呈现，但它没有加载页眉、页脚布局。对于页眉、页脚布局，我完全引用了this example。

我有以下路线结构：

app.routing.ts

const routes: Routes = [                                              
  {
    path: '',
    component: SiteLayoutComponent,
    children: [
        path: RouteConstants.Home,
        component: HomeComponent,
        loadChildren: "./lazyloadingmodules/home.module#HomeModule"
    ] 
  },                                                                        
  {
    path: '',
    redirectTo: '',
  }                                                                        
];

还有HomeModule（惰性模块）路线：

const routes: Routes = [
//routes for post login master page
//{
    //path: '',
    //component: SiteLayoutComponent, 
    //children: [
          { 
            path: RouteConstants.SearchCard, component: SearchCardComponent 
          },
    //]
//}

];

当我单击 SearchCardComponent routerLink 时，它会正确加载 SearchCardComponent 但组件未显示在出口区域中。它显示页眉页脚布局。

有人能告诉我代码中的错误是什么吗？

谢谢

【问题讨论】：

标签： angular6 lazy-loading

【解决方案1】：

在深入研究代码后，我找到了解决方案。惰性模块路由中有一个错误。

惰性模块路由代码更改来自：

{ 
     path: RouteConstants.SearchCard, component: SearchCardComponent 
},

到

{ 
     path: '', component: SearchCardComponent 
},

现在可以正常使用了。

【讨论】：