علاوه بر preload:true یک نام هم فراهم میکنیم :
سپس سرویس SelectiveStrategyService را به حالت زیر ویرایش میکنیم
{ path: "client", loadChildren: "app/client/client.module#ClientModule", data: { preload: true, name: "client-module" } }
import { Injectable } from '@angular/core'; import { Route, PreloadingStrategy } from '@angular/router'; import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; @Injectable() export class SelectiveStrategyService implements PreloadingStrategy { routes: { [name: string]: { route: Route; load: Function } } = {}; preload(route: Route, load: Function): Observable<any> { if (route.data && route.data['preload']) { this.routes[route.data.name] = { route, load }; } return Observable.of(null); } preLoadRoute(name: string) { const route = this.routes[name]; if (route) { route.load(); } } }
در اینجا مسیرهای که preload آنها true باشد، بجای فراخوانی مستقیم تابع load ، آن ها را در یک دیکشنری ذخیره میکنیم در این حالت میتوان بعد به آنها دسترسی داشت . متد preLoadRoute نام یک مسیر را دریافت میکند و سپس تابع load مربوط به آن مسیر را فراخوانی میکند.
برای مثال : در app.component یک تابع تعریف میکنیم که با فراخوانی آن کار پیش بارگذاری ماژول را انجام میدهد :
constructor(private loader: SelectiveStrategyService) { } PreLoad() { this.loader.preLoadRoute('client-module'); }
در اینجا اگر برگه Network مربوط به مروگر Chrome را مشاهده کنید بعد از فراخوانی متد PreLoad ،ماژول client-module بارگذاری خواهد شد.