Injeção de um Serviço em Outro no Angular

Para trabalhar em um projeto, podemos precisar injetar um serviço em outro para estender sua funcionalidade. Vamos criar mais um serviço que irá exibir mensagens no console ao adicionar novos dados.

Primeiro, na pasta test/src/app, crie o arquivo log.service.ts. Exporte a classe LogService, na qual escreveremos a função write para exibir uma mensagem no console:

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

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

Em seguida, vamos para o nosso serviço DataService e importamos, injetamos e usamos o nosso novo serviço:

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

@Injectable()
export class DataService {
	private data: string[] = ['a', 'b', 'c'];
	
	constructor(private logService: LogService) { // injetamos
		
	}
	
	getData(): string[] {
		this.logService.write('dados recebidos'); // usamos
		return this.data;
	}
	
	addData(name: string){
		this.data.push(name);
		this.logService.write('novo elemento adicionado'); // usamos
	}
}

Isso, no entanto, não é suficiente. Também é necessário registrar o novo serviço na classe do componente, mesmo que não seja usado diretamente lá:

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

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