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:

import { 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:

import { 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:

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

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