angular – 子模块中的RouteReuseStrategy

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

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

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

TL; DR在主模块中提供RouteReuseStrategy而不是子模块(默认情况下为app.module.ts).然后,为每个路由分配route.data中的密钥以区分您的路由.

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

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

如果我在子模块ApiMarketModule中提供自定义的RouteReuseStrategy,则永远不会构造RouteReuseStrategy.

解决方案是在主模块中提供策略而不是子模块(在我的情况下为app.module.ts).然后你的RouteReuseStrategy将被正确构建.

但是,由于route.routeConfig.path是因为您的子路由而相对路径,因此策略将无法按预期工作.要解决这个问题,我的解决方案是为我的路线分配一个唯一的键,如下所示：

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

这是我的RouteReuseStrategy实现FYR

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没有详细记录,由于策略在根级别工作,我的解决方案可能存在潜在的性能问题.欢迎讨论:))