Injection d'un service dans un autre dans Angular

Pour travailler sur le projet, nous pourrions avoir besoin d'injecter un service dans un autre afin d'étendre leurs fonctionnalités. Créons un autre service qui affichera des messages dans la console lors de l'ajout de nouvelles données.

Premièrement, dans le dossier test/src/app, créons le fichier log.service.ts. Exportons la classe LogService, dans laquelle nous écrirons la fonction write pour afficher un message dans la console :

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

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

Ensuite, allons dans notre service DataService et importons, injectons et utilisons notre nouveau service :

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

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

Cependant, cela ne suffit pas. Il faut également déclarer le nouveau service dans la classe du composant, même s'il n'y est pas utilisé directement :

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

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