分析角中的预加载配置,懒加载配置

　　介绍

本篇内容主要讲解”分析角中的预加载配置,懒加载配置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习”分析角中的预加载配置,懒加载配置”吧!

分析角中的预加载配置,懒加载配置

NgModule作为角模块的核心、下面首先就来讲一讲。

<强> 1,@NgModule的作用:

<李>

NgModule最根本的意义是帮助开发者组织业务代码,开发者可以利用NgModule把关系比较紧密的组件组织到一起,这是首要的。

<李>

NgModule用来控制组件,指令,管道等是否可以使用,处于同一个NgModule里面的组件默认互相可见,而对于外部的组件来说,只能看到NgModule导出(出口)的内容,也就是说,如果你定义的NgModule不出口任何内容,那么外部使用者即使进口了你这个模块,也没法使用里面定义的任何内容。

<李>

NgModule是打包时候用到的最小单位,打包的时候会检查所有@NgModule和路由配置,角底层是使用webpack打包。因为角已经帮我们配置好了webpack,所以开发者轻松很多,否则就需要自己配置环境。

<李>

NgModule是路由器进行异步加载的最小单位,路由器能加载的最小单位是模块,而不是组件。当然,模块里面只放一个组件是允许的,很多组件库都是这样做的。【相关教程推荐:《角教程》】

<强> 2,@NgModule结构说明:

@NgModule ({, 　　声明:[],,//属于当前模块的组件,指令及管道 　　进口:[],,//当前模板所依赖的项,即外部模块(包括step,路由等) 　　出口:[],//声明出应用给其他的模块使用 　　供应商:[],,//注入服务到当前模块 　　引导:[]//默认启动哪个组件(只有根模块才能设置引导属性) 　　})

<强> 3,懒加载说明

<强>(1)<代码> RouterModule> forRoot() 和<代码> forChild() 来配置路由信息。

<李>

<代码> forRoot()//在主模块中定义主要的路由信息

<李>

<代码> forChild() ' '//>

<强>(2)懒加载:loadChildren

此处并没有将对应的模块加入到AppModule中,而是通过<代码> loadChildren 属性,告诉角路由依据<代码> loadChildren 属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用,当用户访问/xxx/* *路径的时候,才会加载对应的模块,这减少了应用启动时加载资源的大小。loadChildren的属性值由三部分组成:

<李>

需要导入模块的相对路径

<李>

#分隔符

<李>

导出模块类的名称

<强>(3)预加载

在使用懒加载的情况下,路由第一次加载某个模块时,有时反应有延迟。这时就可以用预加载策略来解决这个问题。

角提供了两种加载策略,

<李>

<代码> PreloadAllModules> <李>

<代码> NoPreloading>

<代码> RouterModule.forRoo() 的<代码>第二个参数> preloadingStrategy> //使用默认预加载——预加载全部模块 　　{},NgModule  import 得到& # 39;@angular/核心# 39;;, 　　{},AppComponent  import 得到& # 39;。/app.component& # 39;,, 　　{},routes  import 得到& # 39;。/main.routing& # 39;,, 　　{},RouterModule  import 得到& # 39;@angular/路由器# 39;;, 　　{},PreloadAllModules  import 得到& # 39;@angular/路由器# 39;;, 　　@NgModule ({, 　　(AppComponent)声明:,,, 　　进口:[,BrowserModule, RouterModule.forRoot(路线,,{,preloadingStrategy: PreloadAllModules }),),, 　　供应商:[],, 　　引导:[AppComponent],}), 　　{export  class  AppModule }

但是,我们更喜欢自己去控制对模块的预加载,这时就需要自定义预加载策略

,自定义5秒后加载所有模块

在应用组建的同级新建一个custom-preloading-strategy。ts文件

import  {, Route },得到& # 39;@angular/路由器# 39;; 　　{},PreloadingStrategy  import 得到& # 39;@angular/路由器# 39;; 　　{},Observable  import 得到& # 39;rxjs/rx # 39;; 　　 　　export  class  CustomPreloadingStrategy  implements  PreloadingStrategy  { 　　,,,预加载(路线:路线,fn:,(),=祝辞,Observable

分析角中的预加载配置,懒加载配置