CustomReuseStrategy 不适用于延迟加载的组件

Question

我有一个组件是现在正在延迟加载的模块的一部分。问题是每次使用路由时组件都会重新初始化。

这是我的路线。

{
    path: 'activities',
    loadChildren: () => System.import('../containers/activity-engine/activity-engine.module').then((file: any) => {
        return file.default;
    }),
    data: {
        shouldDetach: true, // Route will be resused. See CustomReuseStrategy.
        title: null
    }
},

这是正在加载的模块的路径。

{
    path: '',
    component: ActivityEngineComponent,
    data: {
        shouldDetach: true, // Route will be resused. See CustomReuseStrategy.
        title: null
    }
},

我正在应用程序模块和延迟加载模块中导入以下内容类，它们将作为提供程序应用：

import { RouteReuseStrategy } from '@angular/router';
import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';
import { CustomReuseStrategy } from '../../shared/router/custom-reuse-strategy';

providers: [
        { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
        { provide: LocationStrategy, useClass: PathLocationStrategy }
]

这是我的 CustomReuseStrategy：

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    // Determines if this route (and its subtree) should be detached to be reused later.
    shouldDetach(route: ActivatedRouteSnapshot): boolean {

        // We can choose which routes should be resued (i.e. shouldDetach === true) 
        // (
        return !!route.data && !!(route.data as any).shouldDetach;
    }

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

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

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

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

}

是否可以将 CustomReuseStrategy 与延迟加载的组件一起使用？

Answer 1

您不需要 shouldDetach: true 在延迟加载子项的地方，只有在您定义了组件的地方才需要。

CustomReuseStrategy 不适用于延迟加载的组件

CustomReuseStrategy not working for lazy loaded components

angular-routing

angular