Angular 将服务注入服务：无提供者

Question

我在 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的提供者处提供服务。

我也关注了this，上面写着

确保在声明之前声明 ClientAppSettingService 的提供者 MonitoringService 的提供者

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

constructor( @Inject(ClientAppSettingService) _clientAppSettingService: ClientAppSettingService)

但是，我仍然收到关于 No Provider 的错误：

ERROR 错误：未捕获（承诺）：错误：没有 ClientAppSettingService 的提供者！ (MonitoringService -> ClientAppSettingService) 错误：没有 ClientAppSettingService 的提供者！ (MonitoringService -> ClientAppSettingService)

其他信息：

我有一个base.component.ts，它调用了 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 如下：

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);
  }

Answer 1

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

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

您必须将其从您的模块中移除，并将另一个保留在那里。 请记住，无论您想在哪里注入服务，都必须将其提供到组件中。

Answer 2

发生这种情况是因为您尚未在 app.module.ts 文件中注册您的服务。您需要将 ClientAppSettingService 设置为 app.module.ts 中的 providers 数组。它应该看起来像

providers: [ClientAppSettingService]

当然，在将其用于提供者数组之前，您必须将其导入。