angular - 子模块中的 RouteReuseStrategy

Question

这是我懒加载的子模块:

@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
      },
    ]
  }
]

和 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 都没有被触发。这是为什么？是否可以在延迟加载模块中重用组件？

Answer 1

TL;DR 在主模块而不是子模块(默认为 app.module.ts)中提供您的 RouteReuseStrategy。然后，在 route.data 中为每个路由分配一个 key 以区分您的路由。

---

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

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

如果我在子模块 ApiMarketModule 中提供自定义的 RouteReuseStrategy，则永远不会构造 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 实现 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 没有很好的文档记录，由于策略在根级别上工作，我的解决方案可能存在潜在的性能问题。欢迎讨论:))