Question

我有一个带有一些带有过滤器页面的应用程序，我想保留过滤器和结果，因此当我回到页面时，它会显示那些过滤器和结果。因此，我正在使用ReuseStrategy来保持某些组件的状态，但是对于延迟加载的子路由来说，它不能很好地工作。当我沿路线的第一级导航时，它会按预期工作，并保持所需组件的状态。但是，如果我导航到第二条路线然后访问另一条路线并返回其父路线，它将停止工作并抛出以下错误：无法重新附加从其他路线创建的ActivatedRouteSnapshot 。

这是我的ReuseStrategy类：

import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
interface RouteStorageObject {
  snapshot: ActivatedRouteSnapshot;
  handle: DetachedRouteHandle;
}
export class CustomReuseStrategy implements RouteReuseStrategy {
  storedRoutes: { [key: string]: RouteStorageObject } = {};
  private acceptedRoutes: string[] = [
    'page1',
    'page2',
    'page3'
  ];
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return this.acceptedRoutes.indexOf(route.data['key']) > -1;
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    const storedRoute: RouteStorageObject = {
      snapshot: route,
      handle: handle
    };
    this.storedRoutes[route.data['key']] = storedRoute;
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    if (route.routeConfig.path === 'login') {
      this.storedRoutes = {};
      return false;
    }
    return !!route.data && !!this.storedRoutes[route.data['key']];
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.data || !this.storedRoutes[route.data['key']]) {
      return null;
    }
    return this.storedRoutes[route.data['key']].handle;
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

我的app-routing.module.ts：

...
export const routes: Routes = [
  ...
  { path: 'page1',
    loadChildren: 'app/features/page1.module#Page1Module',
    data: { key: 'page1' }
  },
  {
    path: 'page2',
    loadChildren: 'app/features/page2.module#Page2Module',
    data: { key: 'page2' }
  },
  { path: 'page3',
    loadChildren: 'app/features/page3.module#Page3Module',
    data: { key: 'page3' }
  },
  { path: 'another-page',
    loadChildren: 'app/features/another-page.module#AnotherPageModule',
    data: { key: 'another-page' }
  },
  { path: 'home', redirectTo: 'page1', pathMatch: 'full' },
  { path: '**', redirectTo: 'page1', pathMatch: 'full' }
];
...

和page1-routing.module.ts（page1有子页面）：

...
const routes: Routes = [
  { path: '', component: Page1Component },
  {
    path: 'page1-1',
    loadChildren: './page1-1/page1-1.module#Page11Module',
    data: { key: 'page1-1' }
  },
  {
    path: 'page1-2',
    loadChildren: './page1-2/page1-2.module#Page12Module',
    data: { key: 'page1-2' }
  },
];
...

我有以下页面：

第1页（保持状态）
- 第1-1页
- 第1-2页
第2页（保持状态）
第3页（保持状态）
另一页

有关正确导航的示例（不会引发任何错误）：第1页=>第1-1页=>第1页=>第2页=>第1页

错误导航示例（引发错误，无法重新附加从其他路线创建的ActivatedRouteSnapshot）：第1页=>第1-1页=>第2页=>第1页

Answer 1

您可以获得的最佳答案是：https://github.com/angular/angular/issues/13869。

通常，您将必须调试路由器页面查找，以查明为什么路由器拒绝保存的路由。

ReuseStrategy不适用于延迟加载的子路由（无法重新附加从其他路由创建的ActivatedRouteSnapshot）

1 个答案: