Yhden palvelun injektointi toiseen Angularissa

Projektin parissa työskennellessä saattaa olla tarpeen injektoida yksi palvelu toiseen laajentaaksemme niiden toiminnallisuutta. Luodaan toinen palvelu, joka tulostaa viestejä konsoliin uusia tietoja lisättäessä.

Aluksi luodaan kansioon test/src/app tiedosto log.service.ts. Viedään luokka LogService, johon kirjoitamme write-funktion viestin tulostamiseksi konsoliin:

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

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

Seuraavaksi siirrytään palveluumme DataService ja tuodaan, injektoidaan ja käytetään uutta palveluamme:

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

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

Tämä ei kuitenkaan riitä. Uusi palvelu on myös määritettävä komponenttiluokassa, vaikka sitä ei siellä suoraan käytetäkään:

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

@Component({
  ........
  providers: [DataService, LogService] // lisätään
})