angular - UrlMatcher 中的 Angular 6 依赖注入

Question

如何为路由注入依赖项UrlMatcher？

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

这就是为什么我需要一个 Singleton 服务UrlMatcher来获取数据一次，然后使用它来确定路由（然后将其注入到带有获取数据的组件中）。

我创建了一个 UrlMatcher 工厂：

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

但我不知道如何在所有这些服务中使用相同的服务，以及如何在不使用不良实践代码的情况下创建它。

标签： angulardependency-injectionroutingsingle-page-applicationwp-api

Answer 1

1.在main.ts：

export let appInjector: Injector;


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

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

import {appInjector} from '../../main';

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