Injizieren eines Dienstes in einen anderen in Angular

Für die Arbeit am Projekt kann es erforderlich sein, einen Dienst in einen anderen zu injizieren, um deren Funktionalität zu erweitern. Lassen Sie uns noch einen Dienst erstellen, der Nachrichten in der Konsole ausgibt, wenn neue Daten hinzugefügt werden.

Zuerst erstellen wir im Ordner test/src/app die Datei log.service.ts. Wir exportieren die Klasse LogService, in der wir die Funktion write zum Ausgeben einer Nachricht in der Konsole definieren:

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

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

Als nächstes gehen wir zu unserem Dienst DataService und importieren, injizieren und verwenden unseren neuen Dienst:

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

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

Das reicht jedoch nicht aus. Es ist auch notwendig, den neuen Dienst in der Komponentenklasse anzugeben, obwohl er dort nicht direkt verwendet wird:

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

@Component({
	........
	providers: [DataService, LogService] // hinzufügen
})