angular - 如何在 Angular 使用useFactory根据某些条件延迟加载模块？

Question

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

我想做什么:

假设，我有一个 bookStore 网站，很多读者都花时间阅读在线文章。我想根据 reader's role 显示不同的模块。如果读者的 Angular 色是管理员或员工，那么他们可以访问所有功能和组件。如果读者的 Angular 色是 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模块中写的 所以。当此模块加载时，useFactory 将执行并更新已被 angular 使用的 ROUTES 变量。

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

我正在学习动态路由教程:How to load different module on same routeAngular说这是angular的bug，在useFactory resolve之前，angular compile ROUTES injectionToken。 ( Cannot read property 'loadChildren' of undefined" error )

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

Answer 1

经过大量研究和@OLO 的回答，我应用的 Total Solution 是这样的:

1. 制作了一个处理程序模块(ReaderHandlerModule - 决定应该加载什么的模块)
2. 将此处理程序模块加载到路径上的常规路由数组中，例如:'/reader'

[ ..., {
  path: '/reader', 
  loadChildren: () =>
            import('../../../shared/reader-handler.module').then((m) => m.ReaderHandlerModule)
}, ... ]

1. 制作了一个可以从 API 获取一些数据的服务，以检查读者的 Angular 色是什么

2. 将服务的函数调用到服务的构造函数中，并将结果存储在服务的一个 behaviorSubject 变量中，以便它可以在任何地方订阅以获取数据。

ReaderHandlerModule.ts

import { NgModule } from "@angular/core";
import { Routes, ROUTES } from "@angular/router";
import { ReaderService} from "app/_services";
import { SharedModule } from "./shared.module";

export function configReaderRoutes(readerService: ReaderService) {
  let routes: Routes = [];
  if (readerService.readerRole) {
    if (readerService.readerRole == 'User') {
      routes = [{
        path: '',
        loadChildren: () =>
          import('../user/userReader.module').then(
            (m) => m.ReaderModule
          )
      }]
    } else if (readerService.readerRole == 'Admin') {
      routes = [{
        path: '',
        loadChildren: () =>
          import('../admin/adminReader.module').then(
            (m) => m.ReaderModule
          )
      }]
    }
    else {
      routes = [{
        path: '',
        loadChildren: () =>
          import('../user/userReader.module').then(
            (m) => m.ReaderModule
          )
      }]
    }
  }
  else {
    routes = [{
      path: '',
      loadChildren: () =>
          import('../user/userReader.module').then(
            (m) => m.ReaderModule
          )
    }]
  }
  return routes;
}

@NgModule({
  declarations: [],
  imports: [
    SharedModule
  ],
  providers: [{
    provide: ROUTES,
    useFactory: configReaderRoutes,
    deps: [ReaderService],
    multi: true,
  }]
})
export class ReaderHandlerModule { }

ReaderService.ts

export class ReaderService implements OnDestroy {
    public readerRole: 'User' | 'Admin' = 'User';
    private readerTypeSubject: BehaviorSubject<any>;
    public readerTypeObservable: Observable<any>;

    constructor(public router: Router) {
        this.readerTypeSubject = new BehaviorSubject<any>('User');
        this.readerTypeObservable = this.readerTypeSubject .asObservable();

        this.getReaderType().subscribe(result => {
            this.readerRole = result.readerType
        })
    }

    getReaderType() {
       return this.readerTypeSubject.asObservable();
    }

    fetchReaderType() {
        .... Fetch data from API and store in readerTypeSubject.
        // So getReaderType().subscribe() will fire and readerRole variable from this service will update.
        // FetchReaderType is called before load this handler Module (/reader). 
    }

如果你想重新加载处理程序模块以再次根据条件检查重新获取和重新加载模块。然后使用这个函数:

refreshRoutes() {
        const i = this.router.config[1].children.findIndex(route => route.path === 'reader');
        this.router.config[1].children.splice(i, 1);
        this.router.config[1].children.push({
            path: 'reader',
            import('../../../shared/reader-handler.module').then((m) => m.ReaderHandlerModule),
        })
    }