如何在 Angular 8 中延遲加載子組件？

Question

我有一個包含多個模態（NgbModal）的組件。這些模態連接到多個子組件。我正在嘗試延遲加載這些子組件

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

Answer 1

您可以使用這樣的路由來延遲加載儀表板模塊

// 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},

];