ionic4-路由预加载策略 PreloadingStrateg
环境
node 10.15.0
ionic 4.12.0
cordova 9.0
# platforms
cordova-android：8.0.0
cordova-ios: 5.0.0
背景介绍
Angular提供了路由懒加载，及在需要加载时才会加载相应路由，以此来减少非必要的网络请求(如在首页不加载详情)；
const routes: Routes = [
{
path: 'index',
loadChildren: './pages/index/index.module#IndexPageModule'
}
];
ionic4的提供的路由加载策略
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
preloadingStrategy: 提供2种策略
- PreloadAllModules： 加载全部
- NoPreloading: 无预加载
下面我们分别试下这2种策略
PreloadAllModules
image.png
启动app,此时routes中的所有module均被加载.
NoPreloading
image.png
启动app, 此时routes中只有默认路由的module被加载
自定义PreloadingStrategy
自定义的目的：
能否提供某种方式？实现如下需求：
- 在首页(tab-home),预先加载’我的‘页面(tab-mine)
方式一
实现原理：
在需要预加载的路由中配置字段，只要有这个字段的都会被预加载。
在路由配置中增加一个字段，如：
{
path: 'mine',
loadChildren: './mine/mine.module#MinePageModule',
data: {
preload: true
}
}
新建文件：SimplePreloadingStrategy.ts
须实现PreloadingStrategy的preload()方法
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
export class SimpleLoadingStrategy implements PreloadingStrategy {
preload(route: Route, load: Function): Observable<any> {
if (route.data && route.data.preload) {
return load();
}
return of(null);
}
}
app.routing.module
在app.routing.module文件中，使用SimpleLoadingStrategy，并在providers中提供SimpleLoadingStrategy；
这里我们使用login页面和main(tab页)测试下，添加 data : {preload: true}
const routes: Routes = [
{path: '', redirectTo: '/index', pathMatch: 'full'},
{path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'},
{path: 'login/:id', loadChildren: './pages/login/login.module#LoginPageModule', data : {preload: true}}
];
@NgModule({
providers: [SimpleLoadingStrategy],
imports: [
RouterModule.forRoot(routes, {preloadingStrategy: SimpleLoadingStrategy})
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
启动app, 此时routes中加载了loginModule（数字1）；
此时进入main(tabs)页面,加载了mine页面
image.png
方式二
通过注解的方式，更加方便的使用。
实现原理：
在需要预加载的路由中配置字段，满足以下条件时，才会被加载：
- 路由配置中存在此字段
- 使用了@Preload('name')
在路由配置中增加一个字段，如：
{
path: 'mine',
loadChildren: './mine/mine.module#MinePageModule',
data: {
name: 'mine'
}
}
新建文件：SelectivePreLoading.ts
须实现PreloadingStrategy的preload()方法
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
export class SelectivePreLoading implements PreloadingStrategy {
routes: { [name: string]: { route: Route; load: Function } } = {};
preload(route: Route, load: Function): Observable<any> {
if (route.data && route.data['name']) {
this.routes[route.data['name']] = {
route,
load
};
}
return of(null);
}
preLoadRoute(name: string) {
const route = this.routes[name];
if (route) {
route.load();
}
}
}
app.routing.module
在app.routing.module文件中，使用SelectivePreLoading，并在providers中提供SelectivePreLoading；
这里我们使用login页面测试下，添加 data : {name: 'xxx'}
const routes: Routes = [
{path: '', redirectTo: '/index', pathMatch: 'full'},
{path: 'index', loadChildren: './pages/index/index.module#IndexPageModule'},
{path: 'main', loadChildren: './pages/main/main.module#MainPageModule'},
{path: 'login/:id', loadChildren: './pages/login/login.module#LoginPageModule', data : {name: 'login'}}
];
@NgModule({
providers: [SelectivePreLoading],
imports: [
RouterModule.forRoot(routes, {preloadingStrategy: SelectivePreLoading})
],
exports: [RouterModule]
})
export class AppRoutingModule {
}
index.page.ts
@PreLoad('login')
export class IndexPage implements OnInit {
...
}
main/home/home.page.ts
@PreLoad('mine')
export class HomePage implements OnInit {
...
}
启动app, 此时routes中加载了loginModule（数字1）；
此时进入main(tabs)页面,加载了mine页面
image.png
去除index.page.ts中的@Preload('login')测试
此时不会加载login页面。
下一篇将介绍页面之间如何传递参数。
