在提供者 Angular 5 中注入服务？

Question

我在 Angular 5 中有简单的自定义服务：

@Injectable()
export class RequestsMethods {
  constructor(private http: HttpService) {
  }

}

我试图在@NgModule({}) 中将其注册为提供者：

providers: [
    RequestsMethods,
    FormRegister,
    ErrorWatcher,
    {
      provide: HttpService,
      useFactory: httpFactoryService,
      deps: [Router, XHRBackend, RequestOptions]
    }
  ],

然后在我使用的组件中：

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [RequestsMethods]

});

和组件构造函数：

constructor(private requestMethods: RequestsMethods){}

编译后它给了我一个错误：

错误：StaticInjectorError(AppModule)[HttpService -> XHRBackend]：
StaticInjectorError(Platform: core)[HttpService -> XHRBackend]: NullInjectorError: XHRBackend 没有提供者！ 在 NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1060) at resolveToken (core.js:1298) at tryResolveToken (core.js:1242) at StaticInjector .push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139) at resolveToken (core.js:1298) at tryResolveToken (core.js:1242) at StaticInjector.push ../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1139) at resolveNgModuleDep (core.js:8374) at _callFactory (core.js:8442) at _createProviderInstance (core.js) :8394)

如果从RequestsMethods删除构造函数并在提供者中注册RequestsMethods它工作正常

Answer 1

1) 在你的 app.module.ts 中，

-- import and register RequestsMethods under providers.
-- import and register BrowserModule and HttpClientModule under imports.

@NgModule({
 imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  providers: [RequestsMethods],
})

2) 将 RequestMethods 服务导入并注入到您想要的组件中。

构造函数（私有请求方法：RequestsMethods）{}

对于您的用例，不要在组件级别“提供”RequestMethods 服务。

IE：

在您的组件中，以下行就足够了

constructor(private requestMethods: RequestsMethods){}

在 @Component 注释中删除此 -> providers: [RequestsMethods]

解释：

Provider 让依赖注入系统知道“如何获取依赖的值”。

当您将服务提供者添加到 app.module.ts（根模块）时，它在整个应用程序中都可用。

您应该始终尝试在根模块中提供所需的服务，除非您希望该服务仅在导入特定的 @NgModule 时可用。