Angular 组件未使用延迟加载（路由器 Children）加载 header 布局

Question

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

但是当我点击 SearchComponent 时 link html 正确呈现但未加载 Header，页脚布局。对于 header，页脚布局我完全参考了 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 但组件未显示在插座中 area.It 显示 header 页脚布局。

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

谢谢

Answer 1

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

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

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

到

{ 
     path: '', component: SearchCardComponent 
},

现在可以正常使用了。

Angular 组件未使用延迟加载（路由器 Children）加载 header 布局

Angular component not loading header layout with Lazyloading (Router Children)

lazy-loading

angular6