Vložení jedné služby do druhé v Angular

Pro práci na projektu může být potřeba vložit jednu službu do druhé, aby se rozšířila jejich funkčnost. Pojďme vytvořit ještě jednu službu, která bude vypisovat zprávy do konzole při přidání nových dat.

Nejprve ve složce test/src/app vytvoříme soubor log.service.ts. Exportujeme třídu LogService, ve které napíšeme funkci write pro výpis zprávy do konzole:

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

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

Dále přejdeme do naší služby DataService a importujeme, injektujeme a použijeme naši novou službu:

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

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

To však nestačí. Ještě je potřeba zadat novou službu i v třídě komponentu, i když se tam přímo nepoužívá:

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

@Component({
  ........
  providers: [DataService, LogService] // přidáme
})