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

}