简体   繁体   English

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

[英]Inject service in provider Angular 5?

I have simple custom service in Angular 5:我在 Angular 5 中有简单的自定义服务:

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

}

I tried to register this as provider in @NgModule({}):我试图在@NgModule({}) 中将其注册为提供者:

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

Then in component I used:然后在我使用的组件中:

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

});

And component constructor:和组件构造函数:

constructor(private requestMethods: RequestsMethods){}

After compiling it gives me an error:编译后它给了我一个错误:

Error: StaticInjectorError(AppModule)[HttpService -> XHRBackend]:错误:StaticInjectorError(AppModule)[HttpService -> XHRBackend]:
StaticInjectorError(Platform: core)[HttpService -> XHRBackend]: NullInjectorError: No provider for XHRBackend! StaticInjectorError(Platform: core)[HttpService -> XHRBackend]: NullInjectorError: XHRBackend 没有提供者! at 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)在 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)

If delete constructor from RequestsMethods and register RequestsMethods in providers it works fine如果从RequestsMethods删除构造函数并在提供者中注册RequestsMethods它工作正常

1) In your app.module.ts, 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) Import and inject the RequestMethods service into your desired component. 2) 将 RequestMethods 服务导入并注入到您想要的组件中。

constructor(private requestMethods: RequestsMethods){}构造函数(私有请求方法:RequestsMethods){}

For your use case, do not 'provide' the RequestMethods service at the component level.对于您的用例,不要在组件级别“提供”RequestMethods 服务。

ie: IE:

In your component, the following line is enough在您的组件中,以下行就足够了

constructor(private requestMethods: RequestsMethods){}

Remove this -> providers: [RequestsMethods] in your @Component annotation在 @Component 注释中删除此 -> providers: [RequestsMethods]

Explanation:解释:

Provider lets the dependency injection system to know "how to obtain a value for a dependency". Provider 让依赖注入系统知道“如何获取依赖的值”。

When you add a service provider to the app.module.ts (root module), it is available throughout the app.当您将服务提供者添加到 app.module.ts(根模块)时,它在整个应用程序中都可用。

You should always try to provide your desired service in the root module unless if you want the service to be available only if a particular @NgModule is imported.您应该始终尝试在根模块中提供所需的服务,除非您希望该服务仅在导入特定的 @NgModule 时可用。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM