Injectarea unui serviciu în altul în Angular

Pentru lucrul la proiect, s-ar putea să avem nevoie să injectăm un serviciu în altul, pentru a extinde funcționalitatea acestora. Să creăm un alt serviciu care va afișa mesaje în consolă atunci când se adaugă date noi.

Mai întâi, în folderul test/src/app creăm fișierul log.service.ts. Exportăm clasa LogService, în care vom scrie funcția write pentru afișarea unui mesaj în consolă:

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

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

Apoi mergem în serviciul nostru DataService și importăm, injectăm și folosim noul nostru serviciu:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // injectăm
    
  }
  
  getData(): string[] {
    this.logService.write('date primite'); // folosim
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('element nou adăugat'); // folosim
  }
}

Acest lucru, totuși, nu este suficient. Trebuie de asemenea să adăugăm noul serviciu și în clasa componentei, chiar dacă acolo nu este folosit direct:

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

@Component({
  ........
  providers: [DataService, LogService] // adăugăm
})