![](/img/trans.png)
[英]Angular 2 router reuse strategy with lazy loading and deep module structure
[英]Angular2 doesn't work Custom Reuse Strategy with Lazy module loading
我尝试在我的angular2项目中使用自定义重用策略 ,但我发现它不适用于延迟模块加载 。 谁知道这个? 我的项目是角度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
的HeroListComponent lazy-loaded
的值。
我不知道它还没有得到支持。 感谢你们对我的帮助。
RouteReuseStrategy
可以与RouteReuseStrategy
组件一起使用。
这里的问题是你使用route.routeConfig.path
作为存储和检索Handles的键。
我不知道为什么,但是使用route.routeConfig.path
模块时,执行shouldAttach
时route.routeConfig.path
为空
我使用的解决方案是在我的路线中定义自定义键,例如:
{ path: '...', loadChildren: '...module#...Module', data: { key: 'custom_key' } }
可以在ActivatedRouteSnapshot
轻松访问此键值,例如:
route.data.key
使用此键,您可以正确存储和检索手柄。
使用这个。 它使用组件名称作为存储和检索Handles的键。
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;
}
}
使用此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;
}
}
使用此自定义重用策略文件进行延迟模块加载
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;
}
}
为了使它工作,您应该考虑完整路径而不是简单的route.routeConfig.path,正如大多数文章所建议的那样。 例如:
private getKey(route: ActivatedRouteSnapshot): string {
return route.pathFromRoot
.map((el: ActivatedRouteSnapshot) => el.routeConfig ? el.routeConfig.path : '')
.filter(str => str.length > 0)
.join('');
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.handlers[this.getKey(route)] = handle;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.