angularjs懒加载,angular懒加载原理
本文带你了解Angular中的路由配置，简单介绍一下预加载配置和懒加载配置，希望对你有所帮助！
NgModule是角度模块的核心。先说说吧。
1、@NgModule的作用：
NgModule最根本的意义是帮助开发者组织业务代码。开发者可以使用NgModule将紧密相关的组件组织在一起，这是第一件事。NgModule用于控制组件、指令、流水线等。可以使用。默认情况下，同一个NgModule中的组件彼此可见，而外部组件只能看到NgModule导出的内容。也就是说，如果你定义的NgModule没有导出任何内容，那么即使你导入了你的模块，外部用户也无法使用其中定义的任何内容。NgModule是打包中使用的最小单位，所有@NgModule和路由配置都将在打包过程中进行检查。Angular底层是用webpack打包的。因为Angular已经为我们配置好了webpack，所以对于开发者来说就容易多了，否则他们需要配置自己的环境。NgModule是路由器可以异步加载的最小单元。路由器可以加载的最小单位是模块，而不是组件。当然，一个模块中只允许放一个组件。许多组件库都这样做。【相关教程推荐：《angular教程》】2、@NgModule结构说明：
@NgModule({
声明：[]，//属于当前模块的组件、指令和管道
Imports: []，//当前模板依赖的项，即外部模块(包括httpModule，routes等。)
Export:[]，//声明它应该被其他模块使用。
提供者：[]，//将服务注入当前模块
Bootstrap: []//默认启动哪个组件(只有根模块可以设置Bootstrap属性)
})3、懒加载说明
（1）RouterModule对象提供了两个静态的方法：forRoot()和forChild()来配置路由信息。
ForRoot()//在主模块中为Child()``//定义主路由信息，并在功能模块(子模块)（2）懒加载：loadChildren中应用。
这里并没有给AppModule添加对应的模块，而是通过loadChildren属性告诉角路由按照loadChildren属性配置的路径加载对应的模块。这是模块懒加载功能的具体应用。当用户访问/xxx/**路径时，会加载相应的模块，减少了应用程序启动时加载资源的大小。loadChildren的属性值由三部分组成：
导入模块的相对路径#分隔符是必需的。导出模块类的名称是（3）预加载。
在延迟加载的情况下，当路由第一次加载模块时，有时响应会延迟。这时可以采用预加载策略来解决这个问题。
Angular提供了两种装载策略，
preloadall modules-preload no preloading-不预加载(默认)。RouterModule.forRoo()的第二个参数可以添加配置选项，其中一个是preloadingStrategy配置，这是一个预加载策略配置。
//使用默认预加载-预加载所有模块
从“@angular/core”导入{ ng module }；
从“”导入{ AppComponent }。/app . component ；
从导入{ routes }。/main . routing ；
从“@angular/router”导入{ router module }；
从“@angular/router”导入{ PreloadAllModules }；
@NgModule({
声明：[AppComponent]，
imports: [ BrowserModule，RouterModule.forRoot(routes，{ preloadingStrategy:preloadall modules })]，
提供商：[]，
引导：[AppComponent] })
导出类AppModule {}但是，我们更喜欢自己控制模块的预加载，所以需要自定义预加载策略。
5秒后自定义加载所有模块。
在应用程序构建的同一级别创建一个新的自定义预加载策略. ts文件。
从“@angular/router”导入{ Route }；
从“@angular/router”导入{ preloading strategy }；
从“rxjs/Rx”导入{ Observable }；
导出类CustomPreloadingStrategy实现PreloadingStrategy {
preload(route: Route，fn:()=observable boolean):observable boolean {
返回可观测的(真)。延时(5000)。flat map((_:boolean)=fn())；
}
}注入到app.modules.ts的提供者中
从“@angular/platform-browser”导入{ browser module }；
从“@angular/core”导入{ ng module }；
从""导入{ AppComponent } ./app。组件；
从""导入{ HomeComponent } ./家/家。组件；
从导入{路线} ./main。路由；
从" @angular/router "导入{路由器模块}；
从""导入{ CustomPreloadingStrategy } ./preload ；
@NgModule({
声明：[
AppComponent，
家庭组件
],
进口：[
浏览器模块，
RouterModule.forRoot(routes，{ preloadingStrategy:CustomPreloadingStrategy })
],
提供者：[CustomPreloadingStrategy ]，
引导：[应用组件]
})
导出类AppModule { }B，自定义-指定模块预加载
在应用组建的同级新建一个选择性预加载策略文件（需要在app-routing.module.ts中的提供者注入，然后在路由中定义的数据通过附加参数来设置是否预加载)
从" @角度/核心"导入{内射}；
从" @angular/router "导入{ PreloadingStrategy，Route }；
从" rxjs/可观察"导入{可观察的}；
导入 rxjs/add/observable/of ；
@可注射()
导出类选择性预读策略实现预加载策略{
预加载的模块：string[]=[]；
preload(route: Route，load:()=Observableany):Observableany {
如果(路线。数据路由。数据[ preload ]){
返回load()；
}否则{
返回可观察的。of(空)；
}
}
}app-routing.module.ts(此文件懒加载与预加载相结合)
从" @角度/核心"导入{ ng模块}；
从" @angular/router "导入{ RouterModule，Routes }。
从导入{ CanDeactivateGuard } ./guard/can-deactivate-guard。服务；
从""导入{ SelectivePreloadingStrategy } ./select-preload-strategy ；//预加载
从""导入{ PageNotFoundComponent } ./未找到。组件；
常量属性：Routes=[
{路径： ,重定向到：首页，路径匹配：满 }，
{ path: mian ，loadChildren: ./main/main。模块#主模块 }，//懒加载（在这个层级的路由器配置文件及组件文件都不需要引入该组建)
{路径：" home "，loadChildren:" " ./home/home.module#HomeModule ，数据：{ preload: true } }，//懒加载预加载
{路径："**",组件：PageNotFoundComponent } //注意要放到最后
];
@NgModule({
进口：[
路由器模块。对于根(适当的，{
enableTracing: true，//-仅用于调试目的
预加载策略：选择性预加载策略//预加载
})
],
出口：[
路由器模块
],
提供商：[
CanDeactivateGuard，
选择性预读策略
]
})
导出类别批准模块{ }4、子路由创建步骤（没有靠指令创建，直接手动）
(1)新建主文件夹
目录主要的
main.component.html
主组件
主组件
主模块
主路由。模块. ts
main.service.ts
目录aa。组件。html la。组件。scssa。组件。分时（同timesharing）目录bb。组件。html组件。SCS某人。组件。分时（同timesharing）
比如在上面main.component.html有个区域用于放子视图（以下我都先讲思路，再放关键代码，其他不赘述)
差异下面的区域是另一个路由出口/div
路由器出口/路由器出口！-此处依照下面的路由配置，默认显示组件组件的内容- (1)、在主路由。模块. ts里面配置文件夹主要的下的路由，需要引用各组件的组件（需要配置路由的组件)
从" @角度/核心"导入{ ng模块}；
从" @angular/router "导入{RouterModule，Routes }。
从导入{主要组件} ./main。组件；
从""导入{组件} ./A/A . component ；
从""导入{ b组件} ./B/B . component ；
const mainRoute: Routes=[
{
路径： ,
组件：主组件，
数据：{
标题： 面试预约，
},
儿童：[
{
路径： ,//路径为空表示默认路由
组件：一个组件，
数据：{
标题： 大活动，
}
},
{
路径："活动",
组件：b组件，
数据：{
标题： 中活动，
}
}
]
}
];
@NgModule({
进口：[
路由器模块。儿童(主要路线)
],
出口：[
路由器模块
]
})
导出类主路由模块{
}(2)、主要服务一般用于放超文本传送协议(超文本传输协议的缩写)请求
从""导入{应用服务} ./././app。服务；
从" rxjs/可观察"导入{可观察的}；
从" @角度/核心"导入{内射}；
从" @angular/common/http "导入{ http params }；
从""导入{ PageData，ActivitysManage } ./model/activitys-manage ；
从" rxjs "导入{行为主体}；
从""导入{PageDataBig，ActivitySmall，PageDataSmall } ./model/activitys-manage ；
@可注射()
导出类主要服务{
}main文件夹下的组件如要调用MainService，需要在组件的分时（同分时)文件引入主要服务
(3)、在主模块中引入各组件（包括自身、路由配置文件所用到的所有组件以及路由的模块)
从" @angular/forms "导入{表单模块}；
从" @angular/common "导入{公共模块}；
从导入{主要组件} ./面试-预约。组件；
从""导入{组件} ./A/A . component ；
从""导入{ b组件} ./B/B . component ；
从" @角度/核心"导入{ ng模块}；
从导入{核心帧普通模块}././常见/常见。模块；
从""导入{主路由模块} ./main-routing。模块；
从导入{ NgZorroAntdModule }././佐罗/ng-佐罗-antd。模块；
从""导入{主要服务} ./面试-预约。服务；
@NgModule({
导入：[FormsModule，CoreFrameCommonModule，CommonModule，MainRoutingModule，NgZorroAntdModule]，
出口：[],
声明：[主组件，子组件，子组件],
提供商：[MainService]，
})
导出类主模块{ }更多编程相关知识，请访问：编程视频！以上就是浅谈有角的中的预加载配置、懒加载配置的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。