UrlMatcher 中的 Angular 6+ 依赖注入(inject)和异步

Question

如何为路由的 UrlMatcher 注入(inject)依赖项并执行异步路由匹配？

我需要调用后端 API，以便找到每个 URL 的正确路由(通过解析重写规则并在 WordPress 中运行查询)。

这就是为什么我需要为 UrlMatcher 提供一个单例服务来获取一次数据，然后使用它来确定路由(然后将其注入(inject)到包含获取的数据的组件中)。

我创建了一个 UrlMatcher 工厂:

      {
        component: PostComponent,
        matcher: wpApiUrlMatcherFactory('post')
      }

但我不知道如何向所有匹配器注入(inject)相同的服务以及如何使其工作，因为该服务是异步的并且 UrlMatcher 无法返回 Promise 或 Observable。

Answer 1

1.在main.ts中:

export let appInjector: Injector;


platformBrowserDynamic().bootstrapModule(AppModule)
      .then(m => appInjector = m.injector)

2.在您的路由器模块中:

从'../../main'导入{appInjector};

const routes: Routes = [
  {
     matcher: (segments: UrlSegment[]): UrlMatchResult => {
       if (appInjector.get(AccessService).hasAccess('test')) {
         return {consumed: [segment]};
       }
   },
   component: TestComponent,
];