Angular2無法使用定製重用策略與延遲模塊加載

Question

我試圖在我的angular2項目中使用custom reuse strategy， 但我發現它不適用於延遲模塊加載。 知道這個的人嗎？我的項目是角2.6.4

重用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 { } 

，我把<input>這兩個分量和我進行了測試。

存儲CrisisListComponent中的輸入值，但不保留HeroListComponent lazy-loaded的值。

我不知道它還不支持。 謝謝你幫助我。

Answer 1

RouteReuseStrategy可以使用LazyLoaded組件。

這裏的問題是您使用route.routeConfig.path作爲存儲和檢索句柄的關鍵。

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

此：

執行shouldAttach

我用的是我的路線定義自定義按鍵，就像該解決方案時，我不知道爲什麼，但LazyLoaded模塊，route.routeConfig.path是空的鍵值可以在ActivatedRouteSnapshot可以輕鬆訪問，如：

route.data.key 

通過此鍵可以存儲和檢索手柄正確。

Answer 2

使用本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

使用這種定製的懶加載模塊

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

使用這一個重用策略文件。它使用組件名稱作爲存儲和檢索句柄的關鍵。

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

}