Angular2 nie działa Niestandardowa strategia ponownego wykorzystania z modułem Lazy ładowanie

Question

Próbowałem użyć custom reuse strategy w moim projekcie angular2, , ale okazało się, że nie działa z leniwym modułem ładowania. Ktoś, kto o tym wie? Mój projekt jest kanciaste 2.6.4

ponownego użycia 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 { } 

i kładę <input> zarówno składnik a ja testowałem to.

Wartość wejściowa w CrisisListComponent jest przechowywana, ale wartość HeroListComponent lazy-loaded nie jest zachowywana.

Nie wiem, czy jeszcze nie jest obsługiwane. Dziękuję za pomoc.

Answer 1

RouteReuseStrategy współpracuje z komponentami LazyLoaded.

Problem polega na tym, że używasz route.routeConfig.path jako klucza do przechowywania i pobierania uchwytów.

Nie wiem dlaczego, ale z modułami LazyLoaded, route.routeConfig.path jest pusta podczas wykonywania shouldAttach

Rozwiązanie używam jest określenie klucza niestandardowego w moich trasach, takich jak:

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

ten wartość klucza może być łatwo dostępne w ActivatedRouteSnapshot, jak:

route.data.key 

z tego klucza można przechowywać i pobierać uchwyt s poprawnie.

Answer 2

użycie tego 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

użycie zwyczaj ten plik Strategia Reuse dla modułu leniwy załadunku

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; 
    } 

} 

Answer 4

Korzystanie z tego jeden. Używa nazwy komponentu jako klucza do przechowywania i pobierania uchwytów.

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; 
    } 

}