如何在angular4中使用延迟加载加载多个组件？答案

【问题标题】：How to load more than one component using lazy loading in angular4?如何在angular4中使用延迟加载加载多个组件？
【发布时间】：2017-12-27 18:40:24
【问题描述】：

刚开始学习angular4，有点好奇想了解angular4中延迟加载的概念。我一直在浏览this 文章并且学到了一点关于延迟加载的知识，但是我的问题是在我上面提到的这篇文章中，延迟模块中只有一个组件，如果我想要延迟加载模块中的多个组件怎么办，那我该如何声明在延迟加载模块的路由配置中。目前延迟加载的路由配置是

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

如果我想要另一个组件，那我的路由配置会怎样？

【问题讨论】：

我不相信您目前正在使用该配置进行延迟加载。根据文档angular.io/guide/router#milestone-6-asynchronous-routing 的延迟加载可以使用 loadChildren 属性来完成。
请查看我的更新链接
要回答您的问题，您不会延迟加载多个组件。相反，延迟加载的组件内部会包含其他组件。 <lazy-component> <nested-component></nested-component> </lazy-component>
@TommyMay 在惰性模块中不能有这样的东西 route const routes: Routes = [ { path: '', component: LazyComponent } , { path: '/anotherComponent', component: AnotherLazyComponent } ];
@LijinJohn 是的，这种方法也行得通，您可以将组件注入到示例中 app-root 中使用的中。

标签： angular lazy-loading

【解决方案1】：

您可以在惰性模块的路由中使用children 定义路由：

const gtPermitRoutes: Routes = [
    { path: '', component: PermitComponent, children: [
        {path: '', component: PermitListComponent},
        {path: ':permitNumber', component: PermitDetailComponent},
     ]}
 ];

你在惰性模块中声明的任何组件都会被延迟加载，包括那些没有出现在你的路由中，但在你的模板中使用选择器的组件：

@NgModule({
    declarations: [
        PermitComponent,
        PermitDetailComponent,
        AnotherComponent, // selector <app-another-component>
        PermitListComponent
    ],
    imports: [

    ]
})
export class PermitModule {}

【讨论】：