Angular2 - 自定义资源策略 当使用子路由和同级路由的组合时，会出现错误：无法读取属性 '_outlets' 未定义 在评估时

Question

我有一个Angular 2应用程序，其中有几个针对不同功能/组件的选项卡。标签之一是"产品"，我可以在其中看到产品列表并通过在搜索字段中键入名称来搜索产品。因此，我在搜索文本字段中键入文本，并且匹配记录被过滤并显示在页面上。然后，我可以单击产品以查看其详细信息，然后返回"主产品"选项卡。现在，我不想在产品页面上丢失搜索文本和结果。为了解决这个问题，我查看了CustomRusestrategy

我的app.Routing文件看起来有些像：

const appRoutes: Routes =
    [
        {
            path: '',
            component: MainComponent,
            children: [
                {
                    path: '',
                    canActivate: [CanActivateGuard],
                    children: [
                        { path: 'orders', component: OrderComponent, data: { key: 1} },
                        {
                            path: 'products',
                            canActivate: [FeatureEnabledGuard],
                            component: ProductsComponent,
                            data: { key: 2}
                            children: [
                                { path: '', component: FindProductComponent, data: { key: 3} },
                                { path: ':id', component: ProductDetailsComponent, data: { key: 4} },
                            ]
                        },
                    ]
                }
            ]
        }
    ];
import {ActivatedRouteSnapshot, DetachedRouteHandle, Params, 
RouteReuseStrategy} from "@angular/router";
interface RouteStorageObject {
    snapshot: ActivatedRouteSnapshot;
    handle: DetachedRouteHandle;
}
export class CustomReuseStrategy implements RouteReuseStrategy {
    storedRoutes: { [key: string]: RouteStorageObject } = {};
    getFurthestDecendantParams(route: ActivatedRouteSnapshot, sum: any): 
ActivatedRouteSnapshot {
        if (route.children.length > 0) {
            let child: ActivatedRouteSnapshot = route.children[0];
            sum.sum                           = sum.sum + this.sumParams
(child.params);
            return this.getFurthestDecendantParams(child, sum);
        }
        return route;
    }
    sumParams(params: Params): string {
        return Object.keys(params).reduce((param, key) => {
            return param + params[key];
        }, "");
    }
    calcKey(route: ActivatedRouteSnapshot) {
        let paramKey = {
            sum: ""
        }
        if (route.children.length > 0) {
            this.getFurthestDecendantParams(route, paramKey).params;
        } else {
            paramKey.sum = this.sumParams(route.params);
        }
        if (paramKey.sum != "") {
            paramKey.sum = "_" + paramKey.sum;
        }
        return route.data.key + paramKey.sum;
    }
    public shouldDetach(route: ActivatedRouteSnapshot): boolean {
         console.info("CustomReuseStrategy.shouldDetach() - route key: " + 
this.calcKey(route));
        return ("2" === this.calcKey(route));
    }

    public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): 
void {
        let storedRoute: RouteStorageObject = {
            snapshot: route,
            handle: handle
        };
        console.info("CustomReuseStrategy.store() - route key: " + 
this.calcKey(route));
        this.storedRoutes[this.calcKey(route)] = storedRoute;
    }

    public shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.info("CustomReuseStrategy.shouldAttach() - route key: " + this.calcKey(route));
        console.log('in shouldayyach from storedoute = ' + this.storedRoutes[this.calcKey(route)]);
        console.log('returned in shouldAttached = ' + (this.storedRoutes[this.calcKey(route)] !== undefined));
        return this.storedRoutes[this.calcKey(route)] !== undefined;
    }
    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.info("CustomReuseStrategy.retrieve() - route key: " + 
this.calcKey(route));
        if (this.storedRoutes[this.calcKey(route)] === undefined) {
            /* Just return undefined */
            return null;
        } else {
            return this.storedRoutes[this.calcKey(route)].handle;
        }
    }

    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: 
ActivatedRouteSnapshot): boolean {
        let returnValue = (future.routeConfig === curr.routeConfig);
        if (future.routeConfig != null && curr.routeConfig != null) {
            returnValue = this.calcKey(future) === this.calcKey(curr);
            console.info("CustomReuseStrategy.shouldReuseRoute() - future: " + 
this.calcKey(future) + ", curr: " + this.calcKey(curr) +
                ", future.routeConfig.path:" + future.routeConfig.path + ", curr.routeConfig.path:" + curr.routeConfig.path + ", returnValue: " + 
returnValue);
        } else {
            console.info("CustomReuseStrategy.shouldReuseRoute() - future: " + 
this.calcKey(future) + ", curr: " + this.calcKey(curr) +
                ", future.routeConfig:" + future.routeConfig + ", curr.routeConfig:" + curr.routeConfig + ", returnValue: " + returnValue);
        }
        return returnValue;
    }
}

现在，当我单击"产品"选项卡时，进行搜索，然后单击产品以查看其详细信息，然后单击其他选项卡"订单"，我会收到错误：

无法读取不确定的dest

的属性'_outlets'

我在做什么错？

Answer 1

您要坚持应用程序的状态。这是使用共享服务或 ngrx 的经典方案。

他们做什么？。所有数据都将存储在一个位置中，以便每当任何数据更改的任何组件时，都会保存并告知或忽略更改的数据，并且数据观察者将使用更改的数据更新。

<。