Egy szolgáltatás beágyazása egy másikba az Angularban

A projekt során szükség lehet arra, hogy egy szolgáltatást egy másikba ágyazzunk be, hogy kibővítsük funkcionalitásukat. Készítsünk egy új szolgáltatást, amely üzeneteket ír ki a konzolra új adatok hozzáadásakor.

Először a test/src/app mappában hozzuk létre a log.service.ts fájlt. Exportáljuk a LogService osztályt, amelyben megírjuk a write függvényt egy üzenet konzolra írásához:

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

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

Ezután menjünk a DataService szolgáltatásunkhoz, és importáljuk, injektáljuk és használjuk az új szolgáltatásunkat:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // injektáljuk
    
  }
  
  getData(): string[] {
    this.logService.write('adat megérkezett'); // használjuk
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('új elem hozzáadva'); // használjuk
  }
}

Ez azonban nem elég. A új szolgáltatást a komponens osztályban is fel kell tüntetnünk, bár ott közvetlenül nem használjuk:

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

@Component({
  ........
  providers: [DataService, LogService] // hozzáadjuk
})