angular - 在 Angular 中调用具有依赖关系的函数

Question

使用 Angular 5 和 UIRouter 状态路由。我正在根据此界面使用额外的自定义路由状态属性。

interface AugmentedNg2RouteDefinition extends Ng2StateDeclaration {
    default?: string | ((...args: any[]) => string | Promise<string>);
}

当我定义一个抽象状态时，我现在也可以向它添加一个 default 属性，所以当一个人试图路由到一个抽象状态时，默认应该将它们重定向到配置的 默认子状态。

从上面的接口(interface)可以理解，default可以定义为以下任意一种:

// relative state name
default: '.child',
// absolute state name
default: 'parent.child',
// function with DI injectables
default: (auth: AuthService, stateService: StateService) => {
    if (auth.isAuthenticated) {
        return '.child';
    } else {
        return stateService.target('.login', { ... });
    }
}
// function with DI injectables returning a promise
default: (items: ItemsService) => {
    return items
        .getTotal()
        .then((count) => {
            return count > 7
                ? '.simple'
                : '.paged';
        });
}

要真正使默认工作，我必须配置路由转换服务:

@NgModule({
  imports: [
    ...
    UIRouterModule.forChild({  // or "forRoot"
      states: ...
      // THIS SHOULD PROCESS "default" PROPERTY ON ABSTRACT STATES
      config: (uiRouter: UIRouter, injector: Injector, module: StatesModule) => {
        uiRouter.transitionService.onBefore(
          // ONLY RUN THIS ON ABSTRACTS WITH "default" SET
          {
            to: state => state.abstract === true && !!state.self.default
          },
          // PROCESS "default" VALUE
          transition => {
            let to: transition.to();
            if (angular.isFunction(to.default)) {
              // OK WE HAVE TO EXECUTE THE FUNCTION WITH INJECTABLES SOMEHOW
            } else {
              // this one's simple as "default" is a string
              if (to.default[0] === '.') {
                  to.default = to.name + to.default;
              }
              return transition.router.stateService.target(to.default);
            }
          }
        );
      }
    })
  ]
})
export class SomeFeatureModule { }

所以问题是调用 default 时它是一个可能有一些可注入(inject)服务/值的函数...

配置函数的注入(inject)器(config: (uiRouter: UIRouter, injector: Injector, module: StatesModule)) 只能用于获取服务实例，不能调用可注入(inject)参数的函数。

在 AngularJS 中，这将通过 $injector.invoke(...) 来完成，它将调用函数并注入(inject)其参数。

主要问题

当 default 被定义为可注入(inject)的函数时，我应该如何处理它。

Answer 1

在 Angular 中没有与 AngularJS $injector.invoke 的直接对应，因为可注入(inject)函数应该是在设计时定义的 useFactory 提供程序。

在 AngularJS 中只有一个注入(inject)器实例，但在 Angular 中有一个注入(inject)器层次结构，这也使事情变得复杂，因为在调用函数的注入(inject)器上应该存在依赖关系。

处理此问题的惯用方法是定义所有预期作为提供者调用的函数。这意味着一个函数被限制为使用它在(根或子模块)上定义的注入(inject)器的实例:

export function fooDefaultStateFactory(baz) {
  return () => baz.getStateName();
}

@NgModule({
  providers: [
    Baz,
    {
      provider: fooDefaultStateFactory,
      useFactory: fooDefaultStateFactory,
      deps: [Baz]
    }
  ],
  ...
})
...

// relative state name
default: '.child',
...
// function with DI injectables
default: fooDefaultStateFactory

然后工厂函数可以像任何其他依赖项一样从注入(inject)器中检索并调用:

  transition => {
    ...
    if (typeof to.default === 'string') {
      ...
    } else if (to.default) {
      const defaultState = injector.get(to.default);

      if (typeof defaultState === 'function') {
        // possibly returns a promise
        Promise.resolve(defaultState()).then(...)
      } else { ... }
    }
  }

适用于任何函数的 $injector.invoke 的对应物应该大致类似于构造函数定义在 Angular 2/4 中的工作方式 Class helper (在 Angular 5 中已弃用)。不同之处在于 Class 接受用数组或 parameters 静态属性注释的构造函数，注释应该是数组的数组，因为依赖关系可能涉及装饰器(Inject, Optional 等)。

由于装饰器不适用于未注册为提供者的函数，因此数组应该是普通的，类似于 AngularJS implicit annotations或 Angular useFactory 提供程序中的 deps:

function invoke(injector, fnOrArr) {
  if (Array.isArray(fnOrArr)) {
    const annotations = [...fnOrArr];
    const fn = annotations.pop();
    const deps = annotations.map(annotation => injector.get(annotation));
    return fn(...deps);
  } else {
    return fnOrArr();
  }
}

可以绑定(bind)到注入(inject)器实例:

const injectorInvoke = invoke.bind(injector);
injectorInvoke([Foo, Bar, (foo: Foo, bar: Bar) => {...}]);

并将调用函数的代码段修改为:

  ...
  if (typeof defaultState === 'function' || Array.isArray(defaultState)) {
    // possibly returns a promise
    Promise.resolve(injectorInvoke(defaultState)).then(...)
  } else { ... }
  ...