Inlywing van een diens in 'n ander in Angular

Vir projekwerk mag ons nodig hê om een diens in 'n ander in te lyf om hul funksionaliteit uit te brei. Kom ons maak nog 'n diens wat boodskappe in die konsole sal uitdruk wanneer nuwe data bygevoeg word.

Eers, in die gids test/src/app skep ons die lêer log.service.ts. Ons voer die klas LogService uit, waarin ons die funksie write sal skryf om 'n boodskap in die konsole uit te druk:

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

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

Daarna gaan ons na ons diens DataService en voer in, injekteer en gebruik ons nuwe diens:

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

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

Dit is egter nie genoeg nie. Ons moet ook die nuwe diens in die komponent se klas spesifiseer, alhoewel dit nie direk daar gebruik word nie:

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

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