Внедрить сервис в другой сервис в том же модуле

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

Как я могу предоставить TokenHttpService B для службы A? Могу ли я сделать это в том же модуле?

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
    }
  ]