Angular 4 - RouteReuseStrategy 性能问题 ngDestory 未触发

Question

在我的 Angular 4 应用程序中，我使用了 RouteReuseStrategy 来存储路线。

我的应用程序由于这个存储路由而导致内存泄漏太多，因为当我移动到其他路由时它没有调用 ngOnDestroy() lifehook 事件。

下面是我的RouteReuseStrategy实现接口(interface)和route.config

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 !!route.data && !!(route.data as any).shouldDetach;
    }

    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.routing.js

import { Routes, RouterModule } from "@angular/router";
import { MapComponent } from './components/map/map.component';
import {AuthGuard} from "./components/user-profiles/authentication.component";

const ROUTES: Routes = [
    { path: '', redirectTo: 'maps', pathMatch: 'full' , canActivate:[AuthGuard] },
    { path: 'maps', component: MapComponent , canActivate:[AuthGuard], data: { shouldDetach: true} },
];
export const routing = RouterModule.forRoot(ROUTES);

有什么建议可以释放内存吗？

Answer 1

我在使用路由重用策略的应用程序中遇到了同样的问题。

我的解决方案不是立即销毁组件(我想如果我这样做那么为什么要使用自定义路由重用。所以我会在处理程序字典达到一定大小后销毁它们。

在组件中，我将实现一个 ngOnDestroy() 函数来取消订阅我所有的可观察对象。

我还假设此解决方案仅适用于未命名的路由器导出，也就是“主要”导出。

我使用的是 angular 8，但我认为这适用于以前的版本。

代码示例:(我把它放在商店功能中)

if (this.handlers.size == 4 ) { 
            // Loop on all of the components
            this.handlers.forEach((value: any, key: string) => {
                (<any>this.handlers.get(key))
                          .contexts.get('primary').outlet.component.ngOnDestroy();
            });
            this.handlers.clear(); // clear the list to start over.
        }

希望对您有所帮助!