Как предотвратить разрушение и повторную инициализацию углового компонента? - PullRequest
Новая
       20

Как предотвратить разрушение и повторную инициализацию углового компонента?

0 голосов
/ 05 июля 2019

У меня есть угловое приложение с открытым компонентом карты слоев. Компонент карты должен быть в том же состоянии каждый раз, когда он открывается заново. В приложении есть как маршрутизатор-розетка, так и угловые разделенные области (как разделенная область), каждый компонент может быть активен либо в выходном разъеме маршрутизатора, либо как разделенная область. Сохранение компонента в роутере-выходе может быть выполнено с помощью RouteReuseStrategy. Но если я перейду к другому маршруту в роутере и открою разделенную область, содержащую компонент карты открытых слоев, как мне получить тот же компонент, а не другой экземпляр? Мой HTML выглядит так: 

    <as-split #homeViewSplit direction="horizontal">
      <as-split-area [order]="(routerOutletOrder | async)">
        <router-outlet></router-outlet>
        <app-toolbar *ngIf="(toolbarVisible | async)"></app-toolbar>
      </as-split-area>
      <as-split-area *ngIf="(mapSplitVisible | async)" [order]="1">
        <app-map2d></app-map2d>
        <app-toolbar></app-toolbar>
      </as-split-area>
      <as-split-area *ngIf="(contentSplitVisible | async)" [order]="2">
        <app-content></app-content>
      </as-split-area>
      <as-split-area *ngIf="(propertiesSplitVisible | async)" [order]="3">
        <app-properties></app-properties>
      </as-split-area>
      <as-split-area *ngIf="(leasSplitVisible | async)" [order]="4">
        <app-contracts></app-contracts>
      </as-split-area>
      <as-split-area *ngIf="(sidePanelsSplitVisible | async)" [order]="5">
        <app-side-panels></app-side-panels>
      </as-split-area>
    </as-split>

Так что последовательность будет такой, как показано ниже. 1-я область разделения, содержащая маршрутизатор-аутлер, всегда видна.

  1. Открыть приложение -> компонент app-map2 отображается в роутере-розетке
  2. Перейдите к «Контенту», и компонент приложения-контента отобразится в роутере
  3. Сделать также видимой 2-ую область разделения, содержащую app-map2d

-> теперь app-map2d переинициализирован. Как это предотвратить? Как я уже сказал, я реализовал RouteReuseStrategy, где хранится DetachedRouteHandle: 

export class CacheRouteReuseStrategy implements RouteReuseStrategy {
    routesToCache: string[] = ['map'];
    storedRouteHandles = new Map<string, DetachedRouteHandle>();

    // Decides if the route should be stored
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        if (route.data === undefined) {
            return false;
        }
        return this.routesToCache.indexOf(route.data['key']) > -1;
    }

    //Store the information for the route we're destructing
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
       this.storedRouteHandles.set(route.data['key'], handle);
    }

    //Return true if we have a stored route object for the next route
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        if (route.data === undefined) {
            return false;
        }
        return this.storedRouteHandles.has(route.data['key']);
    }

    //If we returned true in shouldAttach(), now return the actual route data for restoration
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        return this.storedRouteHandles.get(route.data['key']) as DetachedRouteHandle;
    }

    //Reuse the route if we're going to and from the same route
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
       return future.routeConfig === curr.routeConfig;
    }
}
...