Angular 7 Dependency Inject HttpClient 到 Typescript 导出函数中答案

【问题标题】：Angular 7 Dependency Inject HttpClient into Typescript export functionAngular 7 Dependency Inject HttpClient 到 Typescript 导出函数中
【发布时间】：2019-07-18 13:27:47
【问题描述】：

您好，我的角度能力对于我想要实现的目标来说并不是那么好。

我有一个export function，它从数据库中获取数据：

export async function BoardData(httpClient: HttpClient) {
  ...
  return result;
}

你会如何依赖注入 HttpClient 呢？

我不想使用Injector，因为这需要我将我的http请求包装到setTimeout()中，这在内部和Observable.subscribe()中效果不佳。

我已经阅读了有关模块提供程序的信息，尤其是有关 useFactory 参数的信息，但我无法使其工作。请帮忙。

附注Stack 上几乎没有类似的问题，但它们都没有以应有的质量解决问题。

然后从 export const 内部调用此函数，如下所示：

export const initialState: BoardState = {
  board: BoardData(http),
  draggingBoard: null,
  cardInFlight: null,
  listInFlight: null,
  nextId: 1000,
  spilledCard: false,
  isCopying: false,
  shouldCopy: false
};

【问题讨论】：

您在哪里使用该功能？如果您在通过角度解析的任何形式的类实例（例如组件或服务）中使用它，您可以简单地将 HttpClient 注入该对象，然后将其传递给函数
它在类中不起作用，它在 Skyhook 的看板拖放的 Store reducer 中使用。换句话说，它是从 export const 内部调用的

标签： angular typescript dependency-injection

【解决方案1】：

HttpClient是HttpClientModule默认提供的服务。

在您的 AppModule 中导入它

import { HttpClientModule } from '@angular/common/http'
....

@NgModule....
imports: [
   HttpClientModule
]
class AppModule {
}

【讨论】：

简单地导入一个模块并不会用导出函数自动装配它

【解决方案2】：

在我的情况下，我只是将 httpClient 作为参数传递给导出的函数，例如

getData(){
    .....
return exportedFunctionToGetData(this.httpClient);}

并在导出函数的标题中：

exportedFunctionToGetData(httpClient : httpClient){...}

不要忘记在导出的Function ts文件中导入httpClient：

import { HttpClient } from '@angular/common/http';

希望对你有帮助。

【讨论】：