Angular 6：通过延迟加载在同一页面上加载多个模块

Question

我有一个应用程序，我想在一个页面上懒惰地加载多个模块，以便我可以减少具有相同路由路径的页面加载时间（例如在我的仪表板页面中）。

我的app-routing.modules.ts文件：

const appRoutes: Routes = [
    { path: 'dashboard',
      loadChildren: './dashboard/dashboard.module#DashboardModule'
    },
    { path:'dashboard', 
      loadChildren: () => UserlistComponent, pathMatch:'full' 
    },
    { path:'dashboard', 
      loadChildren: () => ClientlistComponent, pathMatch:'full' 
    },
    { path: '', 
    loadChildren: './home/home.module#HomeModule'
    },

我的dashboard-routing.modules.ts文件如下所示：

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
  },
];

无论如何我都找不到这样的方法：当用户在仪表板页面上重定向时，我想同时加载两个组件（用户列表和客户端列表lazi分别加载，这样我可以减少页面加载时间）。

有与此类似的stackoverflow问题（link），但我想使用延迟加载概念加载组件

Answer 1

据我了解，您可能应该在仪表板模块中导入UserList和ClientList组件。如果在同一页面中需要它们，则应直接从仪表板组件模板中调用它们。基本上，在加载仪表板模块时，loadChildren属性已经在执行您似乎想要的延迟加载。

这将为您提供有关应用程序路线的信息：

const appRoutes: Routes = [
    { path: 'dashboard',
      loadChildren: './dashboard/dashboard.module#DashboardModule'
    },
    { path: '', 
    loadChildren: './home/home.module#HomeModule'
    }
];

保持仪表板路由不变，但只需在仪表板组件模板中调用它们之前，将UserListComponent和ClientListComponent放置在仪表板文件夹中并将它们导入到仪表板模块中即可。

// Dashboard module

import { UserListComponent } from '@dashboard/user-list/user-list.component';
import { ClientListComponent } from '@dashboard/client-list/client-list.component';

@NgModule({
  declarations : [
    UserListComponent,
    ClientListComponent,
  ] 
})
export class DashboardModule {}

<!-- Dashboard component -->

<h1> Dashboard </h1>

<div class="row">
  <div class="col-6">
    <app-user-list></app-user-list>
  </div>
  <div class="col-6">
    <app-client-list></app-client-list>
  </div>
</div>

Answer 2

我也有同样的担忧，我有一个仪表板模块，该模块有5个部分，其中4个是carrucel，带有充斥着图像的垫卡组件。我所做的是使用ngIf模拟这些组件的延迟加载。创建一个所有组件均具有load = false且基于的状态。 AfterViewInit生命周期中的每个下一个组件都设置为true，以此类推。因此，最初的低负载和用户体验得到了改善。这类似于连续执行承诺。