角向服务注入服务:没有提供者 [英] Angular Inject Service into Service : No Provider

问题描述

我在Angular中有两项服务:

I have two services in Angular:

MonitoringService.service.ts:

import { ClientAppSettingService } from './clientAppSettings.service';
import { Injectable, Inject } from '@angular/core';

@Injectable()
export class MonitoringService
{
  constructor(private _clientAppSettingService: ClientAppSettingService)
  {
    this.getclientAppSettings();
  }
  getclientAppSettings(): any {
    this._clientAppSettingService.getConfig().subscribe(result => {
    this.data = result;
    }, error => console.error(error));
  }

和ClientAppSetting.service.ts:

import { Injectable, Inject } from '@angular/core';
import { AppSettingsClient } from '../models/appSettingsClient';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ClientAppSettingService {
  appUrl: string = "";
  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.appUrl = baseUrl;
  }
  getConfig() {
    return this.http.get<AppSettingsClient>(this.appUrl + 'api/ClientAppSettings/Get');
  }
}

这是app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ClientAppSettingService } from './services/clientAppSettings.service';
import { HomeService } from './services/home.service';
import { AppComponent } from './app.component';
import { MonitoringService } from './services/monitoring.service';
import { HomeComponent } from './home/home.component';
import { EmbedReportComponent } from './embedReport/embedReport.component';
import { BaseComponent } from './base.component';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    EmbedReportComponent,
    BaseComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'report', component: EmbedReportComponent }
    ])
  ],
  providers: [
    ClientAppSettingService,
    HomeService,
    ReportService,
    MonitoringService
    ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我遵循了 this ，其中说您需要在NgModule的提供者中提供服务.

I followed this , which says that you need to provide service in the provider of NgModule.

我还遵循了此，它表示

确保在声明之前声明ClientAppSettingService的提供程序 MonitorningService的提供者

Make sure you declare a provider for ClientAppSettingService before you declare a provider for MonitorningService

我还尝试过在构造函数中添加@Inject，如下所示:

I also tried adding @Inject in my constructor as below:

constructor( @Inject(ClientAppSettingService) _clientAppSettingService: ClientAppSettingService)

但是，我仍然收到有关没有提供者的错误:

However, I still receive error regarding No Provider:

错误错误:未被捕获(承诺):错误:没有ClientAppSettingService的提供程序！ (MonitoringService-> ClientAppSettingService) 错误:没有ClientAppSettingService的提供者！ (MonitoringService-> ClientAppSettingService)

ERROR Error: Uncaught (in promise): Error: No provider for ClientAppSettingService! (MonitoringService -> ClientAppSettingService) Error: No provider for ClientAppSettingService! (MonitoringService -> ClientAppSettingService)

其他信息:

我有一个base.component.ts，它调用了MonitoringService:

I have a base.component.ts which calls the MonitoringService:

import { MonitoringService } from './services/monitoring.service';
import { Component, ReflectiveInjector, OnInit } from '@angular/core';

@Component({
  template: ''
})
export class BaseComponent
{
  constructor(private _monitoringService: MonitoringService)
  {
    const injector = ReflectiveInjector.resolveAndCreate([
      MonitoringService
    ]);
    this._monitoringService = injector.get(MonitoringService);
  }

然后我使用Base.component.ts扩展其他组件以使用MonitorningService，如下所示.例如，home.component.ts使用MonitoringService如下:

Then I extent other components with Base.component.ts to use the MonitorningService as below. For example home.component.ts uses MonitoringService as below:

import { Home } from '../models/home';
import { BaseComponent } from '../base.component';
import { MonitoringService } from '../services/monitoring.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})

export class HomeComponent extends BaseComponent implements OnInit
{
  home: Home;

  constructor(private homeService: HomeService, private _monitorningService: MonitoringService)
  {
    super(_monitorningService);
  }

推荐答案

让我解释一下. 您有两层，一层是您的组件，另一层是您的模块. 您可以做的是将ClientAppSettingService提供到组件中:

Let me explain it a little. You have two layers one layer is your component and the other layer is your module. What you can do is provide the ClientAppSettingService into the component:

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

您必须将其从模块中删除，然后将另一个保留在那里. 请记住，在任何要注入服务的地方都必须将其提供到组件中.

You have to remove it from your module and keep the other one there. Keep in mind that everywhere where you want to inject your service you have to provide it into the component.

这篇关于角向服务注入服务:没有提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！