Внедрение одного сервиса в другой в Angular

Для работы над проектом нам может понадобиться внедрить один сервис в другой, чтобы расширить их функциональность. Давайте сделаем еще один сервис, который будет выводить сообщения в консоль при добавлении новых данных.

Вначале в папке test/src/app создаем файл log.service.ts. Экспортируем класс LogService, в котором пропишем функцию write для вывода сообщения в консоль:

log.service.tsimport { Injectable } from '@angular/core';

@Injectable()
export class LogService {
  write(message: string) {
    console.log(message);
  }
}

Далее переходим в наш сервис DataService и импортируем, инжектируем и используем наш новый сервис:

app/data.service.tsimport { Injectable } from '@angular/core';
import { LogService } from './log.service'; // импортируем

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // инжектируем
    
  }
  
  getData(): string[] {
    this.logService.write('data received'); // используем
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('new elem added'); // используем
  }
}

Этого, однако, мало. Нужно еще прописать новый сервис и в классе компонента, хотя он там напрямую и не используется:

app/app.component.tsimport { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // импортируем

@Component({
  ........
  providers: [DataService, LogService] // добавляем
})