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（平台：核心）[HttpService-> XHRBackend]： NullInjectorError：XHRBackend没有提供程序！在NullInjector.push ../ node_modules/@angular/core/fesm5/core.js.NullInjector.get （core.js：1060）在resolveToken（core.js：1298）在tryResolveToken（core.js：1242）在StaticInjector.push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get （core.js：1139）在resolveToken（core.js：1298）在tryResolveToken（core.js：1242）在StaticInjector.push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get （core.js：1139）在resolveNgModuleDep（core.js：8374）在_callFactory（core.js：8442）在_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服务并将其注入到所需的组件中。

构造函数（私有requestMethods：RequestsMethods）{}

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

即：

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

constructor(private requestMethods: RequestsMethods){}

在您的@Component批注中删除此-> providers: [RequestsMethods]

说明：

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

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

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

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

1 个答案: