Injektion af en service i en anden i Angular

For at arbejde på projektet kan vi have brug for at injicere en service i en anden for at udvide deres funktionalitet. Lad os oprette endnu en service, som vil udskrive beskeder i konsollen, når der tilføjes nye data.

Først i mappen test/src/app opretter vi filen log.service.ts. Vi eksporterer klassen LogService, hvor vi skriver funktionen write for at udskrive en besked i konsollen:

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

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

Dernæst går vi til vores service DataService og importerer, injicerer og bruger vores nye service:

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

@Injectable()
export class DataService {
	private data: string[] = ['a', 'b', 'c'];
	
	constructor(private logService: LogService) { // injicerer
		
	}
	
	getData(): string[] {
		this.logService.write('data modtaget'); // bruger
		return this.data;
	}
	
	addData(name: string){
		this.data.push(name);
		this.logService.write('nyt element tilføjet'); // bruger
	}
}

Dette er dog ikke nok. Vi skal også registrere den nye service i komponentklassen, selvom den ikke direkte bruges der:

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

@Component({
	........
	providers: [DataService, LogService] // tilføjer
})