在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候,角加载这个模块。但这需要一点时间。在用户第一次点击的时候,会有一点延迟。
我们可以通过预加载路由来修复这个问题。路由可以在用户与其它部分交互的时候,异步加载延迟的模块。这可以使用户在访问延迟模块的时候更快地访问。
本文将在上一个示例的基础上,增加预加载的功能。
在上一节中,我们的根路由定义在main.routing。ts,我们在app.module。ts中使用了根路由定义。
需要注意的是,国内组件是提前加载的。我们将在系统启动之后渲染这个组件。
在角渲染家组件之后,用户就可以与应用交互了,我们可以通过简单的配置在后台预加载其它模块。
<>强启用预加载强>
我们在forRoot函数中,提供一个预加载的策略。
从“@angular/platform-browser”进口{BrowserModule}; 从“@angular进口{NgModule}/核心”; 进口{AppComponent}”。/app.component '; 从“进口{HomeComponent}。/home/home.component '; 进口{路线}”。/main.routing '; 从“@angular/路由器”进口{RouterModule}; 从“@angular/路由器”进口{PreloadAllModules}; @NgModule ({ 声明:[ AppComponent, HomeComponent ), 进口:[ BrowserModule, RouterModule。forRoot(路线,{preloadingStrategy: PreloadAllModules}) ), 供应商:[], 引导(AppComponent): }) 出口类AppModule {} >之前这个PreloadAllModules策略来自@angular/路由器,所以我们还需要导入它。
<强>定制预加载策略强>
路由器包中预定义了两个策略:
<李>不预加载NoPreloading李> <李>预加载所有模块PreloadAllModules李>
<强> 5秒之后加载模块强>
但是,您可以自己定义一个定制的策略。这比您想的要更为简单,例如,您希望在应用初始化5秒之后加载其余的模块。
您需要实现接口PreloadingStrategy,我们定义一个CustomPreloadingStrategy的自定义策略类。
从@angular/路由器的进口{路线}; 从“@angular/路由器”进口{PreloadingStrategy}; 从rxjs/Rx的进口{可见}; 出口类CustomPreloadingStrategy实现PreloadingStrategy { 预加载(路线:路线,fn:()=比;Observable{ 返回Observable.of(真正的).delay (5000) .flatMap((_:布尔)=比;fn ()); } } >之前 然后,修改app.module。ts使用这个自定义策略。需要注意的是,您还需要在prodivers中添加这个类。以实现依赖注入。
从“@angular/platform-browser”进口{BrowserModule}; 从“@angular进口{NgModule}/核心”; 进口{AppComponent}”。/app.component '; 从“进口{HomeComponent}。/home/home.component '; 进口{路线}”。/main.routing '; 从“@angular/路由器”进口{RouterModule}; 从“进口{CustomPreloadingStrategy}。/预加载; @NgModule ({ 声明:[ AppComponent, HomeComponent ), 进口:[ BrowserModule, RouterModule。forRoot(路线,{preloadingStrategy: CustomPreloadingStrategy}) ), 提供者:[CustomPreloadingStrategy], 引导(AppComponent): }) 出口类AppModule {} >之前你会看到在5秒钟之后,这个功能模块被自动加载了。
<强>加载指定模块强>
我们还可以在路由中定义附加的参数来指定哪些模块进行预加载,我们使用路由定义中的数据来提供这个附加的数据。
从@angular/路由器的进口{路线};//HomeComponent这个组件将急切的加载 从“进口{HomeComponent}。/home/home.component '; 出口const路线:路线=( {路径:“组件:HomeComponent pathMatch:“全部”}, {路径:“商店”,loadChildren:“。/商店/商店。模块# ShopModule ',数据:{预加载:真}}, {路径:“* *”,组件:HomeComponent} ]; >之前然后,我们定义新的加载策略。
从rxjs/Rx的进口{可见}; 进口{PreloadingStrategy、路线}“@angular/路由器”; 出口类PreloadSelectedModules实现PreloadingStrategy { 预加载(路线:路线、负载:功能):Observable角实现预加载延迟模块的示例