Εισαγωγή μιας υπηρεσίας σε μια άλλη στο Angular

Για την εργασία σε ένα project μπορεί να χρειαστεί να εισάγουμε μια υπηρεσία σε μια άλλη, ώστε να επεκτείνουμε τη λειτουργικότητά τους. Ας δημιουργήσουμε μια ακόμη υπηρεσία, που θα εκτυπώνει μηνύματα στην κονσόλα κατά την προσθήκη νέων δεδομένων.

Αρχικά, στο φάκελο 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'); // χρησιμοποιούμε
	}
}

Αυτό, ωστόσο, δεν είναι αρκετό. Πρέπει επίσης να δηλώσουμε τη νέα υπηρεσία και στην κλάση του component, αν και δεν χρησιμοποιείται απευθείας εκεί:

import { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // εισάγουμε

@Component({
	........
	providers: [DataService, LogService] // προσθέτουμε
})