子模块中的 RouteReuseStrategy

这是我的延迟加载子模块：

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(acnpRoutes),
    ....
  ],
  declarations: [...],
  providers: [
    {provide: RouteReuseStrategy, useClass: ACNPReuseStrategy}
  ]
})
export class AddCustomerNaturalPersonModule {
}

routes:

const acnpRoutes: Routes = [
  {
    path: '',
    component: AddCustomerNaturalPersonComponent,
    children: [
      {
        path: 'stepOne',
        component: ACNPStepOneComponent
      },
      {
        path: 'stepTwo',
        component: ACNPStepTwoComponent
      },
    ]
  }
]

和 ACPNReuseStrategy：

export class ACNPReuseStrategy implements RouteReuseStrategy {
  handlers: {[key: string]: DetachedRouteHandle} = {}

  shouldDetach(route: ActivatedRouteSnapshot): boolean  {
    console.log(1)
    return true;
  }

  store(route: ActivatedRouteSnapshot, handle: {}): void {
    console.log(2)
  }

  ...

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    console.log(5)
  }
}

不幸的是，ACNPReuseStrategy 方法中的这些 console.logs 都没有被触发。这是为什么？延迟加载模块中可以重用组件吗？

TL;DR提供您的RouteReuseStrategy在主模块而不是子模块中（app.module.ts默认情况下）。然后，为每条路线分配一个key in route.data使您的路线与众不同。

我最近也遇到了这个问题。我的子模块安装在主应用程序路由下，如下所示：

..., {    // in app.route.ts
          path: 'apimarket',
          canActivate: [DeveloperResolve],
          loadChildren: './apimarket/apimarket.module#ApiMarketModule'
}

如果我提供我的定制RouteReuseStrategy在子模块中ApiMarketModule, the RouteReuseStrategy永远不会被建造。

解决方案是在主模块而不是子模块中提供策略（app.module.ts就我而言）。那么你的RouteReuseStrategy将被正确构建。

然而，由于以下原因，该策略不会按预期发挥作用：route.routeConfig.path由于您的子路线，因此是相对路径。为了解决这个问题，我的解决方案是分配一个唯一的key我的路线是这样的：

export const apimarketRoutes: Routes = [
    {
        path: '',
        component: ApiMarketComponent,
        data: {
            shouldReuse: true,
            key: 'apimarketroot'
        }
    },
    {
        path: ':id',
        component: ContentPageComponent,
    }
];

这是我的RouteReuseStrategy实施前两年

export class MyRouteReuseStrategy implements RouteReuseStrategy {
  handlers: {[key: string]: DetachedRouteHandle} = {};

  constructor() {
    console.log('constructed');
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    if (!route.data['shouldReuse']) {
      return null;
    }
    console.log('Attach cached page for: ', route.data['key']);
    return this.handlers[route.data['key']];
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    if (route.data['shouldReuse']) {
      this.handlers[route.data['key']] = handle;
    }
  }

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return !!route.data['shouldReuse'];
  }

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return !!route.data['shouldReuse'] && !!this.handlers[route.data['key']];
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
    return !!future.data['shouldReuse'];
  }
}

(RouteReuseStrategy没有很好的记录，由于策略在根级别上工作，我的解决方案可能存在潜在的性能问题。欢迎讨论：））