Angular的子模块的自定义RouteReuseStrategy [英] Custom RouteReuseStrategy for Angular's child module

问题描述

我只想对一个模块使用此自定义路由重用策略:

I want to use this custom route reuse strategy for just one module:

export class CustomRouteReuseStrategy extends RouteReuseStrategy {
    public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
    public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
    public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return true;
    }
}

所以我已经在名为ChildModule的模块之一中传递了@NgModule():

So I've passed into @NgModule() in one of my modules named ChildModule:

providers: [
        {
            provide: RouteReuseStrategy,
            useClass: CustomRouteReuseStrategy
        }
]

不幸的是，当我通过那里时，它只是被忽略了.虽然将其添加到我的根目录AppModule时效果很好，但是不确定是否很重要，但是ChildModule却被延迟加载.该怎么解决?

Unfortunately, when I pass it there it simply gets ignored. Although works fine when added to my root AppModule... I'm not sure if it matters, but ChildModule is lazily loaded. How to solve it?

推荐答案

我终于通过将经过修改的CustomRouteStrategy传递给AppModule来实现了它:

I finally achieved it by passing a bit modified CustomRouteStrategy to AppModule:

export class CustomRouteReuseStrategy extends RouteReuseStrategy {
    public shouldDetach(route: ActivatedRouteSnapshot): boolean { return false; }
    public store(route: ActivatedRouteSnapshot, detachedTree: DetachedRouteHandle): void {}
    public shouldAttach(route: ActivatedRouteSnapshot): boolean { return false; }
    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle { return null; }
    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return (future.routeConfig === curr.routeConfig) || future.data.reuse;
    }
}

并将data: { reuse: true }添加到延迟加载的ChildModule的路由中:

And adding data: { reuse: true } to the routing of lazily loaded ChildModule:

{
    path: 'some-path',
    data: { reuse: true },
    loadChildren: './child.module#ChildModule',
},

具有更高级解决方案的演示

这篇关于Angular的子模块的自定义RouteReuseStrategy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！