Question

我想将此自定义路由重用策略用于一个模块：

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（）：

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

不幸的是，当我在那里传递它时，它会被忽略。虽然添加到我的根AppModule时工作正常...我不确定它是否重要，但ChildModule是懒惰加载的。怎么解决？

Answer 1

我最后通过将一点修改后的CustomRouteStrategy传递给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的路由：

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

Demo with more advanced solution

Answer 2

CUSTOM ROUTE STRATEGY

＆＃13;

var str = "You ask your questions on StackOverFlow.com";
var collections = new[]
{
    new List<string> { "You", "your" },
    new List<string> { "Stack", "Flow" },
};

var values = str.Split(
    collections.SelectMany(s => s).Distinct().ToArray(), 
    StringSplitOptions.RemoveEmptyEntries
);

Console.WriteLine(
    string.Join(", ", values)
);

＆＃13;

Answer 3

这是我的带有子项和参数的路由的工作示例：

import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';

export class CustomReuseStrategy implements RouteReuseStrategy {

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

shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.data.shouldReuse || false;
}

store(route: ActivatedRouteSnapshot, handle: {}): void {
    if (route.data.shouldReuse && this.getUrl(route)) {
        this.handlers[this.getUrl(route)] = handle;
    }
}

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

retrieve(route: ActivatedRouteSnapshot): any {
    if (!this.getUrl(route)) {
        return null;
    }
    return this.handlers[this.getUrl(route)];
}

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

getUrl(route: ActivatedRouteSnapshot) {
    if (!route.parent.url.join('/') || !route.url.join('/')) {
        return null;
    }
    let url = '';
    if (route.parent.url.join('/')) {
        url += route.parent.url.join('/') + '/';
    }
    if (route.url.join('/')) {
        url += route.url.join('/');
    }
    return url === '' ? null : url;
}
}

内部路由配置：

export const myRoute: Route = {

    path: 'my',
    component: MyComponent,
    data: {
        pageTitle: 'MY'
    },
    children: [
        {
            path: '',
            redirectTo: 'dashboard',
            pathMatch: 'full'
        },
        {
            path: 'dashboard',
            component: MyDashboardComponent,
            data: {
                shouldReuse: true
            }
        },
        {
            path: 'orders',
            component: MyOrdersComponent,
            data: {
                shouldReuse: true
            }
        },
        {
            path: 'event/:id',
            component: MyEventComponent,
            data: {
                shouldReuse: true
            }
        }
    ]
};

为Angular的子模块定制RouteReuseStrategy

3 个答案: