Question

我有一个Angular 2应用程序，其中包含多个不同功能/组件的选项卡。其中一个选项卡是“产品”，我可以在其中查看产品列表，并通过在搜索字段中键入名称来搜索产品。然后，我可以单击产品以查看其详细信息，然后返回主产品选项卡。现在，我不想丢失产品页面上的搜索文本和结果。为了解决这个问题，我查看了CustomReuseStrategy

我的app.routing文件看起来有点像：

const appRoutes: Routes =
    [
        {
            path: '',
            component: MainComponent,
            children: [
                {
                    path: '',
                    canActivate: [CanActivateGuard],
                    children: [
                        { path: 'orders', component: OrderComponent },
                        {
                            path: 'products',
                            canActivate: [FeatureEnabledGuard],
                            component: ProductsComponent,
                            data: { shouldDetach: true},
                            children: [
                                { path: '', component: FindProductComponent,  data: { shouldDetach: true} },
                                { path: ':id', component: ProductDetailsComponent, data: { shouldDetach: true} },
                            ]
                        },
                    ]
                }
            ]
        }
    ];

我的CustomReuseStrategy类看起来像：

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

export class CustomReuseStrategy implements RouteReuseStrategy {

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

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        if(route.routeConfig.data) { 
            return route.routeConfig.data.shouldDetach;
        }
        return false;
    }

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

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

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

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

}

有了这个，当我在产品页面上搜索时，我会得到一些结果。我点击了产品，可以查看产品详细信息。现在，我回到产品选项卡，我看到结果和搜索已保存，这完全是我想要的。但是，现在当我导航到另一个选项卡说“订单”选项卡时，它工作正常。然后我回到产品选项卡。我仍然像以前一样看到搜索文本和结果，这很好。但是，现在当我点击特定产品到其详细信息页面时，它就失败了。我收到一个错误：

错误：找不到加载'FindProductComponent'的主要插座。为什么我会收到此错误？我对这个问题很遗憾。有什么想法吗？

当使用兄弟和子路线的组合时，似乎有些事情搞砸了

CustomReuseStrategy给出 - 找不到加载'ProductComponent'

0 个答案: