0

我有这样的服务

@Injectable()
export class MyService {
  constructor(private store: Store, @Optional() type: string){}

  static forType(type: string) {
    return { provide: MyService, deps: [Store], useFactory: factoryFn.bind(type) }  
  }

}

export function factoryFn(store: Store, type: string) {
  return new MyService(store, type);
}

并想像这样将它注入我的组件中

@Component{ 
  providers: [MyService.forType('hello')]
}
export class MyComponent {}

但这给了我以下错误

Function calls are not supported in decorators but 'factoryFn' was called in 'MyService'
'MyService' calls 'factoryFn'.

我希望将它作为实际服务上的静态方法的原因是，因为我不希望组件知道 MyService 需要哪些依赖项。MyService 也在很多不同的地方使用，所以通过这种方式，我也避免了重复。

有没有办法欺骗 Angular 允许函数调用？

最好的问候， 本尼迪克特

4

1 回答 1

0

经过一番搜索，我找到了一个巧妙的解决方法来解决这个问题。我们可以根据我们想要的参数创建一个令牌，然后在服务中使用这个令牌。为了自动注入服务和它的令牌，我们可以利用 Angular 扁平化提供者数组的事实，所以我们可以只返回一个包含两者的数组。

export const MY_TOKEN = new InjectionToken<string>('MY_TOKEN');
@Injectable()
export class MyService {
  constructor(private store: Store, @Inject(MY_TOKEN) type: string){}

  static forType(type: string) {
    return [{ provide: MY_TOKEN, useValue: type}, MyService]
  }
}

因此，我们最终得到了使用服务的语法，一切正常，也在 AOT 中：

@Component{ 
  providers: [MyService.forType('hello')]
}
export class MyComponent {}
于 2019-10-16T18:30:16.547 回答