Как мне предварительно загрузить директиву + соответствующий HTML в Ionic / Angular? (Директива Mapbox)

Question

Я хочу предварительно загрузить директиву Angular, содержащую плагин с именем Mapbox. Без этой предварительной загрузки пользователь при входе на страницу, где находится директива, должен будет ждать загрузки mapbox в директиву.

Я попытался использовать атрибут PreloadAllModules в app-routing.module.ts. файл. Я также попытался реализовать свою собственную PreloadStrategy, которая выглядела так:

app-routing-preloader-service.ts:

@Injectable({
    providedIn: 'root'
})
export class AppRoutingPreloaderService implements PreloadingStrategy {

    private routesToPreload: RouteToPreload[] = [];

    constructor() {
    }

    preload(route: Route, load: Function): Observable<any> {
        if (route.data && route.data.preload) {
            this.routesToPreload.push({
                routePath: route.path,
                route: route,
                load: load
            });
        }

        return of(null);
    }

    preloadRoute(path: string): Promise<void> {
        return new Promise<void>((resolve) => {
            if (this.routesToPreload && 
                this.routesToPreload.length > 0) {
                const routeToPreload: RouteToPreload = 
                    this.routesToPreload.find(
                       (filterRouteToPreload: RouteToPreload) =>
                       filterRouteToPreload.routePath === path);

                if (routeToPreload) {
                    routeToPreload.load();
                }
            }

            resolve();
        });
    }
}

Это моя директива, которая находится на определенной вкладке в сетиapplication:

map.page.html:

<div style="width:100%; height:105%;" id="mapbox" appMapbox></div>

И это директива:

mapbox.directive.ts:

@Directive({
  selector: "[appMapbox]"
})
export class MapboxDirective implements OnInit {
  constructor(
    public el: ElementRef,
    public mapboxService: MapboxService
  ) {}

  ngOnInit() {
    this.mapboxService.init(this.el)
  }
}

Мне бы хотелось, чтобы эта директива и html-страница загружались так же, как при входе на вкладку, где находится директива, но вместо этого загружайте ее перед входом на вкладку.

Спасибо

РЕДАКТИРОВАТЬ: просто чтобы уточнить,проблема здесь в том, что я хочу запустить MapboxService.init (Elementref el) на предварительном этапе, но не могу, потому что для этого требуется элемент html, в котором должен отображаться Mapbox, и у меня его нет, пока я не войду в map.page.html

Answer 1

Это сложно.

Что я хотел бы сделать, это создать контейнер карты в appComponent, чтобы он загружался при входе в приложение (или там, где вы считаете это подходящим, я не знаю ваш проект достаточно, чтобы сказать вам, кудаположи это).

Тогда я бы либо скрыл его (атрибут hidden tag), либо вывел бы его из экрана position: absolute; left: -99999px;).

Когда пользователь попадает на страницу, я бы размещал ее там, где она принадлежит, с абсолютным позиционированием.

Но, если честно, я считаю это отвратительным способом сделать это, и вместо этого я просто отобразил бы загрузчик для пользователя (ожидание получения данных - это не плохо). Вы могли бы окружить его другими данными, чтобы пользователь "имел что-то делать" во время ожидания.