Inyección de un servicio en otro en Angular

Para trabajar en el proyecto podemos necesitar inyectar un servicio en otro para ampliar su funcionalidad. Vamos a crear otro servicio que muestre mensajes en la consola al agregar nuevos datos.

Primero, en la carpeta test/src/app creamos el archivo log.service.ts. Exportamos la clase LogService, en la que escribiremos la función write para mostrar mensajes en la consola:

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

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

A continuación, vamos a nuestro servicio DataService e importamos, inyectamos y usamos nuestro nuevo servicio:

app/data.service.tsimport { Injectable } from '@angular/core';
import { LogService } from './log.service'; // importamos

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // inyectamos
    
  }
  
  getData(): string[] {
    this.logService.write('datos recibidos'); // usamos
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('nuevo elemento agregado'); // usamos
  }
}

Sin embargo, esto no es suficiente. También hay que registrar el nuevo servicio en la clase del componente, aunque no se use directamente allí:

app/app.component.tsimport { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // importamos

@Component({
  ........
  providers: [DataService, LogService] // agregamos
})