本篇內(nèi)容主要講解“分析Angular中的預(yù)加載配置、懶加載配置”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“分析Angular中的預(yù)加載配置、懶加載配置”吧!
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的肇源網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
NgModule作為Angular模塊的核心，下面首先就來(lái)講一講。
1、@NgModule的作用：
NgModule 最根本的意義是幫助開(kāi)發(fā)者組織業(yè)務(wù)代碼，開(kāi)發(fā)者可以利用 NgModule 把關(guān)系比較緊密的組件組織到一起，這是首要的。
NgModule 用來(lái)控制組件、指令、管道等是否可以使用，處于同一個(gè) NgModule 里面的組件默認(rèn)互相可見(jiàn)，而對(duì)于外部的組件來(lái)說(shuō)，只能看到 NgModule 導(dǎo)出（ exports ）的內(nèi)容，也就是說(shuō)，如果你定義的 NgModule 不 exports 任何內(nèi)容，那么外部使用者即使 import 了你這個(gè)模塊，也沒(méi)法使用里面定義的任何內(nèi)容。
NgModule 是打包時(shí)候用到的最小單位，打包的時(shí)候會(huì)檢查所有 @NgModule 和路由配置，Angular底層是使用webpack打包。因?yàn)锳ngular已經(jīng)幫我們配置好了webpack，所以開(kāi)發(fā)者輕松很多，否則就需要自己配置環(huán)境。
NgModule 是 Router 進(jìn)行異步加載的最小單位，Router 能加載的最小單位是模塊，而不是組件。當(dāng)然，模塊里面只放一個(gè)組件是允許的，很多組件庫(kù)都是這樣做的?！鞠嚓P(guān)教程推薦：《angular教程》】
2、@NgModule結(jié)構(gòu)說(shuō)明：
重慶分公司
重慶分公司
@NgModule({
declarations: [], //屬于當(dāng)前模塊的組件、指令及管道
imports: [], //當(dāng)前模板所依賴的項(xiàng)，即外部模塊（包括httpModule、路由等）
export:[],//聲明出應(yīng)用給其他的module使用
providers: [], //注入服務(wù)到當(dāng)前模塊
bootstrap: []//默認(rèn)啟動(dòng)哪個(gè)組件(只有根模塊才能設(shè)置bootstrap屬性)
})3、懶加載說(shuō)明
（1）RouterModule對(duì)象提供了兩個(gè)靜態(tài)的方法:forRoot()和forChild()來(lái)配置路由信息。
forRoot()//在主模塊中定義主要的路由信息
forChild()``//應(yīng)用在特性模塊（子模塊）中
（2）懶加載：loadChildren
此處并沒(méi)有將對(duì)應(yīng)的模塊加入到AppModule中，而是通過(guò)loadChildren屬性，告訴Angular路由依據(jù)loadChildren屬性配置的路徑去加載對(duì)應(yīng)的模塊。這就是模塊懶加載功能的具體應(yīng)用，當(dāng)用戶訪問(wèn) /xxx/** 路徑的時(shí)候，才會(huì)加載對(duì)應(yīng)的模塊，這減少了應(yīng)用啟動(dòng)時(shí)加載資源的大小。 loadChildren的屬性值由三部分組成：
需要導(dǎo)入Module的相對(duì)路徑
#分隔符
導(dǎo)出模塊類的名稱
（3）預(yù)加載
在使用懶加載的情況下，路由第一次加載某個(gè)模塊時(shí)，有時(shí)反應(yīng)有延遲。這時(shí)就可以用預(yù)加載策略來(lái)解決這個(gè)問(wèn)題。
Angular提供了兩種加載策略，
PreloadAllModules-預(yù)加載
NoPreloading-沒(méi)有預(yù)加載（默認(rèn)）。
RouterModule.forRoo()的第二個(gè)參數(shù)可以添加配置選項(xiàng)，配置選項(xiàng)中就有一個(gè)是preloadingStrategy配置，這個(gè)配置是一個(gè)預(yù)加載策略配置。
//使用默認(rèn)預(yù)加載-預(yù)加載全部模塊
import { 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 { }但是，我們更喜歡自己去控制對(duì)模塊的預(yù)加載，這時(shí)就需要自定義預(yù)加載策略
A、自定義-5秒后加載所有模塊
在app組建的同級(jí)新建一個(gè)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): Observable {
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、自定義-指定模塊預(yù)加載
在app組建的同級(jí)新建一個(gè)selective-preloading-strategy.ts文件（需要在app-routing.module.ts中的providers注入，然后在路由中定義的data通過(guò)附加參數(shù)來(lái)設(shè)置是否預(yù)加載）
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): Observable {
if (route.data && route.data['preload']) {
return load();
} else {
return Observable.of(null);
}
}
} app-routing.module.ts（此文件懶加載與預(yù)加載相結(jié)合）
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'; // 預(yù)加載
import { PageNotFoundComponent } from './not-found.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: 'mian', loadChildren: './main/mian.module#MainModule' }, // 懶加載(在這個(gè)層級(jí)的router配置文件及module文件都不需要引入該組建)
{ path: 'home', loadChildren: './home/home.module#HomeModule', data: { preload: true } }, // 懶加載 + 預(yù)加載
{ path: '**', component: PageNotFoundComponent } // 注意要放到最后
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes,{
enableTracing: true, // <-- debugging purposes only
preloadingStrategy: SelectivePreloadingStrategy // 預(yù)加載
})
],
exports: [
RouterModule
],
providers: [
CanDeactivateGuard,
SelectivePreloadingStrategy
]
})
export class AppRoutingModule { }4、子路由創(chuàng)建步驟（沒(méi)有靠指令創(chuàng)建，直接手動(dòng)）
（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有個(gè)區(qū)域用于放子視圖（以下我都先講思路，再放關(guān)鍵代碼，其他不贅述）
下面的區(qū)域是另一個(gè)路由出口
(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: '面試預(yù)約',
},
children: [
{
path: '',//path為空表示默認(rèn)路由
component: AComponent,
data: {
title: '大活動(dòng)',
}
},
{
path: 'activity',
component: BComponent,
data: {
title: '中活動(dòng)',
}
}
]
}
];
@NgModule({
imports: [
RouterModule.forChild(mainRoute)
],
exports: [
RouterModule
]
})
export class MainRoutingModule{
}（2）、main.service.ts一般用于放http請(qǐng)求
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文件夾下的組件如要調(diào)用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{ }到此，相信大家對(duì)“分析Angular中的預(yù)加載配置、懶加載配置”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
