Injectie van de ene service in de andere in Angular

Voor projectwerk hebben we mogelijk nodig om de ene service in de andere te injecteren om hun functionaliteit uit te breiden. Laten we nog een service maken die berichten naar de console zal uitvoeren bij het toevoegen van nieuwe gegevens.

Eerst maken we in de map test/src/app het bestand log.service.ts aan. We exporteren de klasse LogService, waarin we de functie write zullen beschrijven voor het uitvoeren van een bericht naar de console:

log.service.tsimport { Injectable } from '@angular/core';

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

Vervolgens gaan we naar onze service DataService en importeren, injecteren en gebruiken we onze nieuwe service:

app/data.service.tsimport { Injectable } from '@angular/core';
import { LogService } from './log.service'; // importeren

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // injecteren
    
  }
  
  getData(): string[] {
    this.logService.write('data ontvangen'); // gebruiken
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('nieuw element toegevoegd'); // gebruiken
  }
}

Dit is echter niet genoeg. We moeten de nieuwe service ook registreren in de klasse van de component, hoewel die daar niet direct wordt gebruikt:

app/app.component.tsimport { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // importeren

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