Iniezione di un servizio in un altro in Angular

Per lavorare sul progetto potrebbe essere necessario iniettare un servizio in un altro per estenderne le funzionalità. Creiamo un altro servizio che visualizzerà messaggi nella console quando vengono aggiunti nuovi dati.

Innanzitutto, nella cartella test/src/app creiamo il file log.service.ts. Esportiamo la classe LogService, in cui scriveremo la funzione write per visualizzare un messaggio nella console:

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

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

Successivamente, andiamo nel nostro servizio DataService e importiamo, iniettiamo e utilizziamo il nostro nuovo servizio:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // iniettiamo
    
  }
  
  getData(): string[] {
    this.logService.write('dati ricevuti'); // utilizziamo
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('nuovo elemento aggiunto'); // utilizziamo
  }
}

Questo, tuttavia, non è sufficiente. È necessario inoltre registrare il nuovo servizio nella classe del componente, anche se non viene utilizzato direttamente lì:

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

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