Вызов метода предварительной загрузки Angular PreloadingStrategy вручную - PullRequest
Новая
       11

Вызов метода предварительной загрузки Angular PreloadingStrategy вручную

1 голос
/ 29 мая 2019

предположим, у нас есть 2 названных модуля (Careworker / Client).В клиентском модуле у нас есть один модуль под названием (Client-Profile).Таким образом, SelectiveStrategyService не загружает модули и будет хранить только имя этого модуля.поэтому он не может получить доступ к имени (client-profile-module).

В следующем сервисе (SelectiveStrategyService) мы будем отслеживать эти маршруты, но вместо немедленного вызова функции загрузки мы будемсохраните его в словаре, чтобы мы могли получить к нему доступ позже 

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 - это просто сервисы, поэтому их можно внедрить в наши компоненты, как и любой другой сервис: 

constructor(private loader: SelectiveStrategyService) {}

Обновление:

в словаре маршрутов,должно быть 3 ключа (модуль-работник, клиент-модуль, модуль-профиль клиента), но только 2 ключа (модуль-работник, клиент-модуль).вот почему я не могу вызвать модуль Client Profile вручную, например: 

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

Излишне говорить, что я так легко могу вызывать preLoadRoute ('client-module;), и он работает 

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

1 Ответ

0 голосов
/ 29 мая 2019

Вам необходимо реализовать собственную стратегию предварительной загрузки. Создайте класс, который реализует интерфейс PreloadingStrategy, и добавьте туда свою логику. Вы можете прочитать объект 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
})

Если происходит загрузка модуля, отменить нет смысла. Вы можете вручную запустить предварительную загрузку еще не загруженных маршрутов.

...