Внедряване на един сервис в друг в Angular

За работа по проекта може да се наложи да внедрим един сервис в друг, за да разширим тяхната функционалност. Нека направим още един сервис, който ще извежда съобщения в конзолата при добавяне на нови данни.

Първо в папката test/src/app създаваме файл log.service.ts. Експортираме клас LogService, в който ще напишем функция write за извеждане на съобщение в конзолата:

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

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

След това отиваме в нашия сервис DataService и импортираме, инжектираме и използваме нашия нов сервис:

import { Injectable } from '@angular/core';
import { LogService } from './log.service'; // импортираме

@Injectable()
export class DataService {
	private data: string[] = ['a', 'b', 'c'];
	
	constructor(private logService: LogService) { // инжектираме
		
	}
	
	getData(): string[] {
		this.logService.write('data received'); // използваме
		return this.data;
	}
	
	addData(name: string){
		this.data.push(name);
		this.logService.write('new elem added'); // използваме
	}
}

Това обаче не е достатъчно. Трябва също да се добави новият сервис и в класа на компонента, въпреки че той не се използва директно там:

import { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // импортираме

@Component({
	........
	providers: [DataService, LogService] // добавяме
})