web前端|js教程
Angular,路由配置,预加载配置,懒加载配置
web前端-js教程
本篇文章带大家了解一下Angular中的路由配置，简单介绍一下预加载配置、懒加载配置，希望对大家有所帮助！
php源码包下载,ubuntu会死机吗,怎么安装tomcat8,爬虫 facebook 图片,php中的 get,seo怎么做seo教学lzw
前端移动o2o源码,vscode三条横线的等号,ubuntu抓log,tomcat环境变量红帽,selenium反反爬虫,php网站静态化原理,seo网络推广怎么做引流lzw
NgModule作为Angular模块的核心，下面首先就来讲一讲。
钓鱼程序源码,vscode能编译c吗,ubuntu好吗,tomcat启动不完整,sqlite 用户权限,食品网页设计方案,织梦数据库配置文件,zencart 图片服务器,成人搜索插件,前端框架统计,意大利爬虫店,php导出表格,e58免费seo技术,springboot占位符,化妆网站模板下载免费,网页如何保存为模板,华美淘宝客程序仿新版卷皮模板源码,asp后台文件管理,中秋祝福页面,微信网上订餐管理系统,安装杰奇1.7程序lzw
1、@NgModule的作用：
NgModule 最根本的意义是帮助开发者组织业务代码，开发者可以利用 NgModule 把关系比较紧密的组件组织到一起，这是首要的。NgModule 用来控制组件、指令、管道等是否可以使用，处于同一个 NgModule 里面的组件默认互相可见，而对于外部的组件来说，只能看到 NgModule 导出（ exports ）的内容，也就是说，如果你定义的 NgModule 不 exports 任何内容，那么外部使用者即使 import 了你这个模块，也没法使用里面定义的任何内容。NgModule 是打包时候用到的最小单位，打包的时候会检查所有 @NgModule 和路由配置，Angular底层是使用webpack打包。因为Angular已经帮我们配置好了webpack，所以开发者轻松很多，否则就需要自己配置环境。NgModule 是 Router 进行异步加载的最小单位，Router 能加载的最小单位是模块，而不是组件。当然，模块里面只放一个组件是允许的，很多组件库都是这样做的。【相关教学推荐：《angular教学》】
2、@NgModule结构说明：
@NgModule({ declarations: [], //属于当前模块的组件、指令及管道imports: [], //当前模板所依赖的项，即外部模块（包括httpModule、路由等）export:[],//声明出应用给其他的module使用providers: [], //注入服务到当前模块bootstrap: []//默认启动哪个组件(只有根模块才能设置bootstrap属性)})
3、懒加载说明
（1）RouterModule对象提供了两个静态的方法:forRoot()和forChild()来配置路由信息。
forRoot()//在主模块中定义主要的路由信息forChild()``//应用在特性模块（子模块）中
（2）懒加载：loadChildren
此处并没有将对应的模块加入到AppModule中，而是通过loadChildren属性，告诉Angular路由依据loadChildren属性配置的路径去加载对应的模块。这就是模块懒加载功能的具体应用，当用户访问 /xxx/** 路径的时候，才会加载对应的模块，这减少了应用启动时加载资源的大小。 loadChildren的属性值由三部分组成：
需要导入Module的相对路径#分隔符导出模块类的名称
（3）预加载
在使用懒加载的情况下，路由第一次加载某个模块时，有时反应有延迟。这时就可以用预加载策略来解决这个问题。
Angular提供了两种加载策略，
PreloadAllModules-预加载NoPreloading-没有预加载（默认）。
RouterModule.forRoo()的第二个参数可以添加配置选项，配置选项中就有一个是preloadingStrategy配置，这个配置是一个预加载策略配置。
//使用默认预加载-预加载全部模块import { NgModule } from @angular/core; import { AppComponent } from ./ponent; 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 xjs/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 ./ponent;import { HomeComponent } from ./home/ponent;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 xjs/Observable;import xjs/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（此文件懒加载与预加载相结合）
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-ponent;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 onlypreloadingStrategy: SelectivePreloadingStrategy // 预加载})],exports: [RouterModule],providers: [CanDeactivateGuard,SelectivePreloadingStrategy]})export class AppRoutingModule { }
4、子路由创建步骤（没有靠指令创建，直接手动）
（1）新建主文件夹
目录main
ponent.html
ponent.scss
ponent.ts
main.module.ts
main-routing.module.ts
main.service.ts
目录AA.ponent.ts目录BB.ponent.ts
比如在上面ponent.html有个区域用于放子视图（以下我都先讲思路，再放关键代码，其他不赘述）
下面的区域是另一个路由出口
(1)、在main-routing.module.ts里面配置文件夹main下的路由，需要引用各组件的component(需要配置路由的组件)
import {NgModule} from @angular/core;import {RouterModule, Routes} from @angular/router;import {MainComponent} from ./ponent;import{AComponent} from ./A/ponent;import{BComponent} from ./B/ponent;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 xjs/Observable;import { Injectable } from @angular/core;import { HttpParams } from @angular/common/http;import { PageData, ActivitysManage } from ./model/activitys-manage;import { BehaviorSubject } from xjs;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-ponent;import { AComponent } from ./A/ponent;import { BComponent } from ./B/ponent;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中的预加载配置 懒加载配置》对你有帮助，请点赞、收藏，并留下你的观点哦！
