We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
参考了很多例子,虽然实现了预加载但却是在本模块内容没加载完就会去加载延迟模块,这样就等于没有配置懒加载,所以得进行一些优化。
├─app.module.ts ├─app.routes.ts ├─shared └─service └─preview-load.ts
preview-load.ts
import { Observable } from 'rxjs/Rx'; import { PreloadingStrategy, Route } from '@angular/router'; export class PreloadModules implements PreloadingStrategy { preload(route: Route, load: Function): Observable<any> { return route.data && route.data.preload ? load() : Observable.of(null); } }
app.module.ts
import { ROUTER_CONFIG } from './app.routes'; import { PreloadModules } from './share/service/preview-load'; ... @NgModule({ imports: [ RouterModule.forRoot(ROUTER_CONFIG, {preloadingStrategy: PreloadModules} ) ], providers: [ PreloadModules ],
app.routes.ts
... export const ROUTER_CONFIG: Routes = [ ... { path: 'login', component: RoleLoginComponent }, { path: 'lists', loadChildren: './tables/tables.module#TablesModule', data: { preload: true } } ];
实测:
部分文件、结构和上面一样,只对preview-load.ts文件做一些更改
import { Observable } from 'rxjs/Rx'; import { PreloadingStrategy, Route } from '@angular/router'; import { Injectable, NgZone } from '@angular/core'; export function requestIdle(zone: NgZone) { const win: any = window; if (win.requestIdleCallback) { return (fn) => win.requestIdleCallback(fn); } return (fn) => zone.runOutsideAngular(() => win.setTimeout(fn, 10)); } @Injectable() export class PreloadModules implements PreloadingStrategy { constructor( private zone: NgZone ) { } preload(route: Route, fn: () => Observable<any>): Observable<any> { requestIdle(this.zone)(fn); return Observable.of(null); } }
看结果
The text was updated successfully, but these errors were encountered:
No branches or pull requests
预加载指定模块
参考了很多例子,虽然实现了预加载但却是在本模块内容没加载完就会去加载延迟模块,这样就等于没有配置懒加载,所以得进行一些优化。
1. 虽然配置了预加载但却在本模块没加载完就去加载延迟模块了(bad)
├─app.module.ts
├─app.routes.ts
├─shared
└─service
└─preview-load.ts
preview-load.ts
app.module.ts
app.routes.ts
实测:
2. 闲时再加载延迟模块(good)
部分文件、结构和上面一样,只对preview-load.ts文件做一些更改
看结果
The text was updated successfully, but these errors were encountered: