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的提供程序 MonitorningService的提供者

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

constructor( @Inject(ClientAppSettingService) _clientAppSettingService: ClientAppSettingService)

但是，我仍然收到有关“无提供者”的错误：

错误错误：未捕获（承诺）：错误：没有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]

当然，您必须先导入同一文件，然后再将其用于provider数组。

角向服务注入服务：没有提供者

2 个答案: