延迟加载的模块被破坏时采取行动

Question

我有一个Angular 6应用程序，我懒于加载模块并通过路由器传递一些数据。进入模块后，我在共享服务中调用一个方法，并将此数据（配置资料）传递给该方法。

我需要在该模块被销毁时（实质上是在用户离开该路径时）调用一个方法，但是我只想调用一次，所以我想避免不得不观察不断变化的路线，因为这会很昂贵。原因是我需要重置共享服务配置。基本上，我具有应用程序的某些配置数据，并且需要为延迟加载的模块覆盖它，但是一旦用户不在模块中，就将其放回去。

我正在尝试在模块的OnDestroy挂钩上调用该函数，但未触发。

路由模块：

const appRoutes: Routes = [
    {
        path: 'lazy',
        loadChildren: 'lazy.module#LazyModule',
        data: {
            test: 'data'
        }
    },
    {
        path: 'home',
        loadChildren: 'home.module#HomeModule',
    },
{
        path: '**',
        redirectTo: '/home'
    }
]

延迟加载的模块：

export class LazyModule implements OnDestroy {

    constructor() {
        console.warn('LazyModule launched!'); // I see this
    }

    ngOnDestroy() {
        console.warn('destroyed'); // This is not triggered
    }

}

Answer 1

从Angular 6开始，模块永远不会卸载。

路由器当前不检查模块在延迟加载后是否已销毁。因此，即使您获得NgModuleRef并手动调用destroy，路由器也仍然认为它已加载。因此它不会延迟加载第二次。

路由器仅加载模块，但不管理其生命周期。即使您可以销毁模块，也不会释放太多内存。延迟加载的模块由随SystemJS加载的WebPack捆绑包管理。加载后，它们将保留在内存中。即使Angular销毁了模块实例，该包的源代码仍在SystemJS的已加载包的内存缓存中。

此问题扩展到供应商库。如果您有一个使用第三方图形库（例如D3）的延迟加载模块，则将加载该供应商库，并且无法将其卸载。

如果需要仅针对特定路由存在的提供程序，则应使用视图提供程序。

@Component({
     ...
     viewProviders: [
         LazyFeatureService
     ]
})
export class MyLazyComponent {}

当您将上述组件用作路由器组件时，将在LazyFeatureService模块延迟加载时创建服务，但是当组件被破坏时，服务也会被破坏。下次用户访问惰性路由时，将再次创建服务。

更新：

原因是我需要重置共享服务配置。基本上，我具有应用程序的某些配置数据，并且需要为延迟加载的模块覆盖它，但是一旦用户不在模块中，就将其放回去。

您可以通过使用路由中的canActivate和canDeactivate处理程序来实现。

在惰性模块的路由配置中，创建一个顶级路由来处理激活。

const routes: Routes = [
    {
        path: '',
        canActivate: [ConfigActivator],
        canDeactivate: [ConfigActivator],
        children: [
            // move the routes here
        ]
    };

然后，您可以像这样定义激活器。

 @Injectable()
 export class ConfigActivator implement CanActivate, CanDeactivate<any> {
       public constructor(private config: MyConfigService) {
       }

       public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
           this.config.lazyModuleLoaded();
           return true;
       }

       public canDeactivate(component: any, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): boolean {
           this.config.lazyModuleUnloaded();
           return true;
       }
 }

上面将调用服务上的方法，以根据路由器状态的变化告诉服务何时应更新配置。由于这是在惰性模块的顶级路由上，因此只有在激活路由以及路由离开该路径时才会触发它。