本文主要讲解“角度载荷中预载荷构型和惰性载荷构型的分析”。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习《Angular中的预载配置和懒载配置分析》！
模块是Angular模块的核心。先说说吧。
1、@NgModule的作用：
NgModule最根本的意义是帮助开发人员组织业务代码。开发人员可以使用NgModule将密切相关的组件组织在一起，这是最重要的。
NgModule用于控制组件、指令、管道等。可以使用。默认情况下，同一模块中的组件彼此可见。对于外部组件，只能看到由模块导出的内容。也就是说，如果您定义的模块没有导出任何内容，那么即使外部用户导入了您的模块，他们也不能使用其中定义的任何内容。
模块是包装中使用的最小单位。包装时将检查所有@ ng模块和路由配置。Angular的底层是用webpack打包的。因为Angular已经为我们配置了webpack，所以开发人员要轻松得多，否则就需要自己配置环境。
模块是路由器可以异步加载的最小单元，路由器可以加载的最小单元是模块，而不是组件。当然，一个模块中只允许放一个组件，这是很多组件库的做法。【相关教程推荐：《angular教程》】
2、@NgModule结构说明：
@ ng module({ 0
声明：[]，//属于当前模块的组件、指令和管道
Imports:[]，//当前模板依赖的项目，即外部模块(包括httpModule、routing等。)
Export:[]，//声明它应该被其他模块使用。
Providers:[]，//将服务注入当前模块
Bootstrap:[]//默认启动哪个组件(只有根模块可以设置Bootstrap属性)
})3、懒加载说明
（1）RouterModule对象提供了两个静态的方法：forRoot()和forChild()来配置路由信息。
ForRoot()//在主模块中定义主路由信息。
for child()` `////应用于功能模块(子模块)
（2）懒加载：loadChildren
这里，Angular路由被告知根据loadChildren属性通过loadChildren属性配置的路径加载相应的模块，而不是将相应的模块添加到AppModule中。这是模块惰性加载功能的具体应用。当用户访问/xxx/**路径时，相应的模块将被加载，这减少了应用程序启动时加载资源的大小。loadChildren的属性值由三部分组成：
需要输入模块的相对路径。
#分隔符
导出的模块类的名称
（3）预加载
在延迟加载的情况下，当路由第一次加载模块时，响应有时会延迟。此时，可以使用预加载策略来解决这个问题。
Angular提供了两种加载策略，
预加载所有模块-预加载
无预加载-无预加载(默认)。
RouterModule.forRoo()的第二个参数可以添加配置选项。配置选项之一是预加载策略配置，这是一种预加载策略配置。
//使用默认预加载-预加载所有模块。
进口nbsp
;{ NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadAllModules } from '@angular/router';
@NgModule({
declarations: [AppComponent],
imports: [ BrowserModule, RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ],
providers: [],
bootstrap: [AppComponent] })
export class AppModule { }
但是，我们更喜欢自己去控制对模块的预加载，这时就需要自定义预加载策略
A、自定义-5秒后加载所有模块
在app组建的同级新建一个custom-preloading-strategy.ts文件
import { Route } from '@angular/router';
import { PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs/Rx';
export class CustomPreloadingStrategy implements PreloadingStrategy {
preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
}
}
在app.modules.ts的providers中注入
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { CustomPreloadingStrategy } from './preload';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
],
providers: [CustomPreloadingStrategy ],
bootstrap: [AppComponent]
})
export class AppModule { }
B、自定义-指定模块预加载
在app组建的同级新建一个selective-preloading-strategy.ts文件（需要在app-routing.module.ts中的providers注入，然后在路由中定义的data通过附加参数来设置是否预加载）
import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Injectable()
export class SelectivePreloadingStrategy implements PreloadingStrategy {
preloadedModules: string[] = [];
preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data && route.data['preload']) {
return load();
} else {
return Observable.of(null);
}
}
}
app-routing.module.ts（此文件懒加载与预加载相结合）
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CanDeactivateGuard } from './guard/can-deactivate-guard.service';
import { SelectivePreloadingStrategy } from './selective-preloading-strategy'; // 预加载
import { PageNotFoundComponent } from './not-found.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'mian', loadChildren: './main/mian.module#MainModule' }, // 懒加载(在这个层级的router配置文件及module文件都不需要引入该组建)
{ path: 'home', loadChildren: './home/home.module#HomeModule', data: { preload: true } }, // 懒加载 + 预加载
{ path: '**', component: PageNotFoundComponent } // 注意要放到最后
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes,{
enableTracing: true, // <-- debugging purposes only
preloadingStrategy: SelectivePreloadingStrategy // 预加载
})
],
exports: [
RouterModule
],
providers: [
CanDeactivateGuard,
SelectivePreloadingStrategy
]
})
export class AppRoutingModule { }
4、子路由创建步骤（没有靠指令创建，直接手动）
（1）新建主文件夹
目录main
-
main.component.html
-
main.component.scss
-
main.component.ts
-
main.module.ts
-
main-routing.module.ts
-
main.service.ts
-
B.component.ts
-
B.component.scss
-
B.component.html
-
A.component.ts
-
A.component.scss
-
A.component.html
-
目录B
-
目录A
比如在上面main.component.html有个区域用于放子视图（以下我都先讲思路，再放关键代码，其他不赘述）
<div>下面的区域是另一个路由出口</div> <router-outlet></router-outlet><!--此处依照下面的路由配置，默认显示AComponent组件的内容-->
(1)、在main-routing.module.ts里面配置文件夹main下的路由，需要引用各组件的component(需要配置路由的组件)
import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {MainComponent} from './main.component';
import{AComponent} from './A/A.component';
import{BComponent} from './B/B.component';
const mainRoute: Routes = [
{
path: '',
component: MainComponent,
data: {
title: '面试预约',
},
children: [
{
path: '',//path为空表示默认路由
component: AComponent,
data: {
title: '大活动',
}
},
{
path: 'activity',
component: BComponent,
data: {
title: '中活动',
}
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(mainRoute)
],
exports: [
RouterModule
]
})
export class MainRoutingModule{
}
（2）、main.service.ts一般用于放http请求
import { AppService } from './../../app.service';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpParams } from '@angular/common/http';
import { PageData, ActivitysManage } from './model/activitys-manage';
import { BehaviorSubject } from 'rxjs';
import {PageDataBig, ActivitySmall, PageDataSmall } from './model/activitys-manage';
@Injectable()
export class MainService {
}
main文件夹下的组件如要调用MainService,需要在组件的ts文件引入MainService
（3）、在main.module.ts中引入各组件（包括自身、路由配置文件所用到的所有组件以及路由的module）
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MainComponent } from './interview-appointment.component';
import { AComponent } from './A/A.component';
import { BComponent } from './B/B.component';
import { NgModule } from '@angular/core';
import { CoreFrameCommonModule } from '../../common/common.module';
import { MainRoutingModule } from './main-routing.module';
import { NgZorroAntdModule } from '../../zorro/ng-zorro-antd.module';
import { MainService } from './interview-appointment.service';
@NgModule({
imports: [FormsModule,CoreFrameCommonModule, CommonModule, MainRoutingModule,NgZorroAntdModule],
exports: [],
declarations: [MainComponent,AComponent,BComponent],
providers: [MainService],
})
export class MainModule{ }
到此，相信大家对“分析Angular中的预加载配置、懒加载配置”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/70742.html