在提供者 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 時可用。