angular - 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,
  },
];

我无论如何都找不到这样做：当用户在仪表板页面上重定向时，我想加载两个组件（用户列表和客户端列表懒惰一一加载，以便我可以减少页面加载时间）。

有类似的stackoverflow问题（链接），但我想加载具有延迟加载概念的组件

标签： angularangular6lazy-loadingangular-routing

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>