Vkladanie jednej služby do druhej v Angular

Pre prácu na projekte môžeme potrebovať vložiť jednu službu do druhej, aby sme rozšírili ich funkcionalitu. Poďme vytvoriť ešte jednu službu, ktorá bude vypisovať správy do konzoly pri pridávaní nových dát.

Najprv v priečinku test/src/app vytvoríme súbor log.service.ts. Exportujeme triedu LogService, v ktorej napíšeme funkciu write pre výpis správy do konzoly:

import { Injectable } from '@angular/core';

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

Ďalej prejdeme do našej služby DataService a importujeme, injektujeme a použijeme našu novú službu:

import { Injectable } from '@angular/core';
import { LogService } from './log.service'; // importujeme

@Injectable()
export class DataService {
	private data: string[] = ['a', 'b', 'c'];
	
	constructor(private logService: LogService) { // injektujeme
		
	}
	
	getData(): string[] {
		this.logService.write('data received'); // používame
		return this.data;
	}
	
	addData(name: string){
		this.data.push(name);
		this.logService.write('new elem added'); // používame
	}
}

To však nestačí. Treba ešte zapísať novú službu aj v triede komponentu, hoci tam nie je priamo používaná:

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

@Component({
	........
	providers: [DataService, LogService] // pridávame
})