时间戳

首页 > 解决方案 > 如何在 Angular 8 中延迟加载子组件？

angular - 如何在 Angular 8 中延迟加载子组件？

问题描述

我有一个包含多个模态（NgbModal）的组件。这些模态连接到多个子组件。我正在尝试延迟加载这些子组件

Dashboard Module  
    |  
    |--> Dashboard Component   
            |-->modal 1  
                 |  
                 |--> child 1 component
                 |--> child 2 component
            |--modal 2
                 |--> child 3 component
                 |--> child 4 component

标签： angularangular6lazy-loadingangular8angular9

解决方案

您可以使用这样的路由延迟加载仪表板模块

// in app routing or higher routing module than dashboard
const routes: Routes = [
 { path: 'dashboard', loadChildren: () => 
  import('./modules/dashboard/dashboard.module').then(m => m.DashboardModule) },
];

然后在您的仪表板路由模块中（要在 dahsboard 模块中导入），您可以进一步重复相同的过程以延迟加载子模块/组件，否则您可以直接路由子组件。

// in dashboard routing module
const routes: Routes = [
 { path: 'chilldComponent1', loadChildren: () => 
  import('./modules/dashboard/components/chilldComponent1.module').then(m => 
  m.chilldComponent1Module) },
 { path: 'childcomponent2', component: Childcomponent2},

];

推荐阅读