首页 文章

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

提问于
浏览 次
-1

我在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），在resolveToken（core.js：1298），在tryResolveToken（core.js：1242），在StaticInjector在StaticInjector.push的tryResolveToken（core.js：1242）的resolveToken（core.js：1298）处的.push ../ node_modules/@angular/core/fesm5/core.js.StaticInjector.get（core.js：1139）位于_callFactory（core.js：8442）的resolveNgModuleDep（core.js：8374）位于_createProviderInstance（core.js）的../node_modules/@angular/core/fesm5/core.js.StaticInjector.get（core.js：1139） ：8394）

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

angular angular5

1 回答

  • 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服务导入并注入所需的组件 .

    构造函数（private requestMethods：RequestsMethods）{}

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

    即：

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

    constructor(private requestMethods: RequestsMethods){}

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

    说明：

    Provider允许依赖注入系统知道“如何获取依赖关系的值” .

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

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

    回复于

相关问题