将一个服务注入到同一个模块中的另一个服务中

Question

我有一个依赖于接口的 ChatService A。

import { Injectable, Inject } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
import { TokenHttpService } from '@lib/interfaces';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  constructor(
    @Inject('TokenHttpService') private tokenFetchService: TokenHttpService,
    private logger: NGXLogger
  ) {
    this.logger.debug('Confirmed ctor for ChatService called');
  }
}

我有一个 HttpService B 实现了 TokenHttpService 接口。

import { Injectable } from '@angular/core';
import { CoreDataService } from '@app/core/async-services/http/core.data';
import { TokenHttpService } from 'he-common';
import { NGXLogger } from 'ngx-logger';

@Injectable()
export class HttpService implements TokenHttpService {
  constructor(
    private _coreDataService: CoreDataService,
    private logger: NGXLogger
  ) {
       this.logger.debug("Confirmed ctor for HttpService called");
    }
}

然后我尝试在 MessagingModule C 中将它们结合起来

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { MessagingPage } from './messaging.page';
import { TranslateModule } from '@ngx-translate/core';
import { ChatService } from 'my-common-lib';
import { SharedModule } from '@app/shared';
import { HttpService } from '@app/core/async-services/http/versioned/http';

const routes: Routes = [
  {
    path: '',
    component: MessagingPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TranslateModule.forChild(),
    RouterModule.forChild(routes),
    SharedModule
  ],
  declarations: [MessagingPage],
  providers: [
    { provide: 'TokenHttpService', useValue: HttpService },
    { provide: ChatService, deps: ['TokenHttpService'] }
  ]
})
export class MessagingPageModule {}

如果我没记错的话，这段代码应该是这样工作的：C 尝试构造 A 并被告知它需要 B，B 也提供给模块，因此它应该将 B 提供给 A，以便它可以在组件中构造和使用D.

import { Component } from '@angular/core';
import { ChatService } from 'he-common';
import { NGXLogger } from 'ngx-logger';

@Component({
  selector: 'app-messaging',
  templateUrl: './messaging.page.html',
  styleUrls: ['./messaging.page.scss']
})
export class MessagingPage {

  constructor(
    private ChatService: ChatService,
    private logger: NGXLogger
  ) {
    // This line logs undefined.
    this.logger.debug(this.twilioChatService);
  }
}

如何向服务 A 提供 TokenHttpService B？ 我可以在同一个模块中做吗？

Answer 1

我发现我的问题是什么：

1. 我需要使用useClass属性而不是useValue属性。 useClass需要一个构造函数（或工厂函数），而useValue属性需要一个简单的对象。
2. 在deps部分，您基本上是覆盖要传递给服务的构造函数的值。 所以，在我的例子中，我注入了'TokenHttpService'但没有记录器，所以我的服务在尝试调用this.logger.debug时抛出了一个错误。 将NGXLogger添加到deps数组后，该服务完美运行。

这是我的最终提供者数组：

  providers: [
    {
      provide: 'TokenHttpService',
      useClass: HttpService
    },
    {
      provide: ChatService,
      deps: ['TokenHttpService', NGXLogger],
      useClass: ChatService
    }
  ]