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
我做错了什么?
推荐答案
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屋！
