Angular2-当使用子级和同级路由的组合时，CustomResueStrategy给出错误:在eval时无法读取未定义的属性'_outlets' [英] Angular2 - CustomResueStrategy when using combination of child and sibling routes gives error: Cannot read property '_outlets' of undefined at eval

问题描述

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

I have an Angular 2 app with several tabs for different features/components. One of the tabs is "Products" where I can see the list of products and search for products by typing name in a search field. So, I type a text in search text field and the matching records are filtered and displayed on the page. I can then click on the product to view its details and then come back to the main products tab. Now, I do not want to lose the search text and results on the products page. To solve this issue, I looked at the CustomReuseStrategy

我的app.routing文件看起来像:

My app.routing file looks somewhat like:

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;
    }
}

现在，在这里，当我单击产品"选项卡，进行搜索，然后单击某个产品以查看其详细信息，然后单击另一个选项卡订购"时，出现错误:

Now, here when I click on the Products tab, do a search, and then click on a product to view its details, and then click on the other tab "Order", I get an error:

在eval时无法读取未定义的属性'_outlets'

Cannot read property '_outlets' of undefined at eval

我在做什么错了?

推荐答案

您要保留应用程序的状态.这是使用 共享服务 或 NGRX .

You want to persist the state of the application . This is a classic scenario for using Shared services or NGRX.

他们做什么? .所有数据都将存储在一个位置，以便任何组件更改任何数据时，它将保存并通知或忽略更改的数据，并且数据的观察者将使用更改后的数据进行自我更新.

What do they do ? . All the data will be stored in a single location so that when ever any data is changed by any component it will save and inform or omit the changed data and the observers of the data will update themselves with the changed data.

这篇关于Angular2-当使用子级和同级路由的组合时，CustomResueStrategy给出错误:在eval时无法读取未定义的属性'_outlets'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！