Injektovanje jedne usluge u drugu u Angularu

Za rad na projektu može nam zatrebati da injektiramo jednu uslugu u drugu, kako bismo proširili njihovu funkcionalnost. Hajde da napravimo još jednu uslugu koja će ispisivati poruke u konzolu pri dodavanju novih podataka.

Prvo, u folderu test/src/app kreiramo fajl log.service.ts. Izvezemo klasu LogService, u kojoj ćemo napisati funkciju write za ispis poruke u konzolu:

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

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

Zatim prelazimo u našu uslugu DataService i importujemo, injektiramo i koristimo našu novu uslugu:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // injektiramo
    
  }
  
  getData(): string[] {
    this.logService.write('podaci primljeni'); // koristimo
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('novi element dodat'); // koristimo
  }
}

Međutim, to nije dovoljno. Potrebno je još da navedemo novu uslugu i u klasi komponente, iako se ona tamo ne koristi direktno:

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

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