如何在角度中使用useFactory基于某些条件延迟加载模块？

如何解决如何在角度中使用useFactory基于某些条件延迟加载模块？

我有一个包含大量模块和组件的 angular 项目，我想在其中显示基于某些业务逻辑的模块组件。 我想使用 angular 的强大功能，即延迟加载，这将使我的应用程序变得精简。

我想做什么：

假设我有一个 bookStore 网站，很多读者都在该网站上花时间阅读在线文章。 我想根据 reader's role 显示不同的模块。如果读者的角色是管理员或员工，那么他们可以访问所有功能和组件。如果读者的角色是 normal，那么他们只能查看某些组件。

为此，我制作了这种结构：

为了实现这个功能。我们必须为模块保持相同的路线，为此，我必须使用 angular 的 useFactory 方法，这将允许我运行自定义函数来更新 InjectionToken(ROUTES) ，该函数已被 angular 本身用于编译和加载模块。

我的模块流程是这样的：

所有三个模块（reader-handler、admin/reader 和 user/reader）都是延迟加载模块。 reader-handler 模块的路径在路由文件中定义，但其他两个模块的路径将使用 useFactory 函数动态附加到 ROUTES 中。

这是我的代码：

providers: [{
    provide: ROUTES,useFactory: decideWhichModuletoLoad,deps: [ReaderService],multi: true,}]

export function decideWhichModuletoLoad(readerService: ReaderService) {
   readerService.getReaderType().subscribe((result) => {
    let routes: Routes = [];
    if (result && result?.Role) {

      if (result.Role == 'admin') {
        routes = [{
          path: '',loadChildren: () =>
            import('../admin/read.module').then((m) => m.ReadModule)
        }]
      }
      else {
        routes = [{
          path: '',loadChildren: () => import('../user/read.module').then((m) => m.ReadModule)
        }]
      }
    }
    else {
      routes = [{
          path: '',loadChildren: () => import('../user/read.module').then((m) => m.ReadModule)
        }]
    }
    return routes;
  });
}

我在 read-handler 模块 So 中编写了这段代码。当此模块加载时，它的 useFactory 将执行并更新已被 angular 使用的 ROUTES 变量。

如果我直接返回路由而不等待来自服务的条件和订阅响应，它可以工作并加载模块。 如果我运行上面的代码，那么动态加载的子组件和模块将是未定义的。因为 angular 在我们更新它之前已经编译了 ROUTES。 错误看起来像这样：

我正在关注此动态路由教程：How to load different module on same route 并且Angular 说这是angular 的bug，在useFactory 解决之前，angular compile ROUTES injectionToken。 (Cannot read property 'loadChildren' of undefined" error)

任何人都知道我该如何解决这个错误......并保持角度等待解决usefactory。 任何小建议都会对我有所帮助。

解决方法

您在订阅中设置路由，它是异步的。您可以尝试在输入 getReaderType 函数之前调用 decideWhichModuleToLoad 并将其存储在某处，以便您可以直接从 useFactory 使用它。