angular - 手动调用 Angular PreloadingStrategy 的 preload 方法

Question

假设，我们有 2 个名为(护理人员/客户)的模块。在客户端模块中，我们有一个名为(Client-Profile)的模块。这样，SelectiveStrategyService 不会加载模块，只会存储该模块的名称。这就是为什么它无法访问(client-profile-module)的名称。

在下面的服务(SelectiveStrategyService)中，我们将跟踪这些路由，但不是立即调用 load 函数，而是将其存储在字典中，以便以后访问

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']) {
      // load();
      this.routes[route.data.name] = {
        route,
        load
      };
    }

    return Observable.of(null);
  }

  preLoadRoute(name: string) {
    const route = this.routes[name];
    if (route) {
      route.load();
    }
  }

}

app.routing.module.ts :

const routes: Routes = [
  {
    path: "careworker", loadChildren: "app/careworker/careworker.module#CareworkerModule",
    data: { preload: false, name: "careworker-module" }
  },
  {
    path: "client", loadChildren: "app/client/client.module#ClientModule",
    data: { preload: true, name: "client-module" }
  }
];

client.routing.module.ts :

const routes: Routes = [
  {
    path: "index", component: ClientIndexComponent
  },
  {
    path: "profile",
    loadChildren: "app/client/client-profile/client-profile.module#ClientProfileModule",
    data: { preload: true, name: "client-profile-module" }
  }
];

SelectiveStrategyService 只是服务，因此它们可以像任何其他服务一样注入(inject)到我们的组件中:

constructor(private loader: SelectiveStrategyService) {}

更新:

在路线字典中，必须有 3 个键 (careworker-module,client-module , client-profile-module) ，但只有 2 个键 (careworker-module,client-module)。这就是为什么我不能手动调用客户端配置文件模块，例如:

ngOnInit() {
  this.loader.preLoadRoute('client-profile-module');
}

不用说我可以很容易地调用 preLoadRoute ('client-module;) 并且它可以工作

  this.loader.preLoadRoute('client-module');

Answer 1

您需要实现自己的自定义预加载策略。创建一个实现 PreloadingStrategy 接口(interface)的类并在那里添加你的逻辑。您可以阅读 data来自路由的对象基于此做一些逻辑。

export class AppPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, load: Function): Observable<any> {
        const loadRoute = (delay) => delay
            ? timer(150).pipe(flatMap(_ => load()))
            : load();
        return route.data && route.data.preload 
            ? loadRoute(route.data.delay)
            : of(null);
      }
}

然后在你的代码中使用这个新策略，比如

RouterModule.forRoot(routes, { 
   preloadingStrategy: AppPreloadingStrategy
})

如果发生模块加载，则没有必要撤消。您可以手动调用尚未加载的路由的预加载。