example - router events angular 6

Angular2 no funciona Estrategia de reutilización personalizada con módulo perezoso de carga

Question

Intenté usar una estrategia de reutilización personalizada en mi proyecto angular2, pero descubrí que no funciona con la carga de módulos vagos . ¿Alguien que sepa sobre esto? Mi proyecto es angular 2.6.4

reuse-strategy.ts

import {RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle} from "@angular/router";

export class CustomReuseStrategy implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug(''CustomReuseStrategy:shouldDetach'', route);
        return true;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug(''CustomReuseStrategy:store'', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug(''CustomReuseStrategy:shouldAttach'', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug(''CustomReuseStrategy:retrieve'', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.debug(''CustomReuseStrategy:shouldReuseRoute'', future, curr);
        return future.routeConfig === curr.routeConfig;
    }

}

app.module.ts

const appRoutes: Routes = [
  { path: ''crisis-center'', component: CrisisListComponent },
  { path: ''heroes'', loadChildren: ''app/hero-list.module#HeroListModule'' },
  { path: '''',   redirectTo: ''/crisis-center'', pathMatch: ''full'' }
];
@NgModule({
  imports: [ ... ],
  declarations: [ ... ],
  providers:[
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

y puse <input> en ambos componentes y lo probé.

el valor de la entrada en CrisisListComponent se almacena, pero el valor de HeroListComponent lazy-loaded no se conserva.

No sé todavía no es compatible. Gracias por ayudarme.

Answer 1

Usa este. Utiliza el nombre del componente como la clave para almacenar y recuperar los Controles.

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from ''@angular/router'';

export class CustomReuseStrategy implements RouteReuseStrategy {


  handlers: { [key: string]: DetachedRouteHandle } = {};


  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.handlers[this.getKey(route)] = handle;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.routeConfig && !!this.handlers[this.getKey(route)];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.routeConfig) {
      return null;
    }
    return this.handlers[this.getKey(route)];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return curr.routeConfig === future.routeConfig;
  }

  private getKey(route: ActivatedRouteSnapshot) {
    let key: string;
    if (route.component) {
      key = route.component[''name''];
    } else {
      key = route.firstChild.component[''name''];
    }
    return key;
  }

}

Answer 2

usa esta ReuseStrategy

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy } from ''@angular/router'';
export class CustomReuseStrategy implements RouteReuseStrategy {

  private handlers: {[key: string]: DetachedRouteHandle} = {};


  constructor() {

  }

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return true;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.handlers[route.url.join("/") || route.parent.url.join("/")] = handle;
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!this.handlers[route.url.join("/") || route.parent.url.join("/")];
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return this.handlers[route.url.join("/") || route.parent.url.join("/")];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }

}

Answer 3

RouteReuseStrategy funciona con componentes LazyLoaded.

El problema aquí es que está utilizando route.routeConfig.path como la clave para almacenar y recuperar los identificadores.

No sé por qué, pero con los módulos route.routeConfig.path , route.routeConfig.path está vacío al ejecutar shouldAttach

La solución que uso es definir una clave personalizada en mis rutas, como:

{ path: ''...'', loadChildren: ''...module#...Module'', data: { key: ''custom_key'' } }

Se puede acceder fácilmente a este valor de clave en ActivatedRouteSnapshot , como:

route.data.key

Con esta clave puede almacenar y recuperar los controladores correctamente.

Answer 4

utilice este archivo de Estrategia de Reutilización personalizado para la carga del módulo diferido

import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from ''@angular/router'';

/** Interface for object which can store both:
 * An ActivatedRouteSnapshot, which is useful for determining whether or not you should attach a route (see this.shouldAttach)
 * A DetachedRouteHandle, which is offered up by this.retrieve, in the case that you do want to attach the stored route
 */
interface RouteStorageObject {
    snapshot: ActivatedRouteSnapshot;
    handle: DetachedRouteHandle;
}

export class CustomReuseStrategy implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.debug(''CustomReuseStrategy:shouldDetach'', route);
        return !!route.data && !!(route.data as any).shouldDetach;
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.debug(''CustomReuseStrategy:store'', route, handle);
        this.handlers[route.data[''key'']]= handle;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.debug(''CustomReuseStrategy:shouldAttach'', route);
        return !!route.data && !!this.handlers[route.data[''key'']];
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.debug(''CustomReuseStrategy:retrieve'', route);
        if (!route.data) return null;
        return this.handlers[route.data[''key'']];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.debug(''CustomReuseStrategy:shouldReuseRoute'', future, curr);
        return future.data === curr.data;
    }

}