Injektimi i një shërbimi në një tjetër në Angular

Për të punuar në projekt, mund të na duhet të injektojmë një shërbim në një tjetër, për të zgjeruar funksionalitetin e tyre. Le të krijojmë një shërbim tjetër, i cili do të shfaqë mesazhe në konsolë kur shtohen të dhëna të reja.

Fillimisht, në dosjen test/src/app krijojmë fajllin log.service.ts. Eksportojmë klasën LogService, në të cilën do të shkruajmë funksionin write për të shfaqur një mesazh në konsolë:

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

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

Më pas, shkojmë në shërbimin tonë DataService dhe importojmë, injektojmë dhe përdorim shërbimin tonë të ri:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // injektojmë
    
  }
  
  getData(): string[] {
    this.logService.write('të dhënat u morën'); // përdorim
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('element i ri u shtua'); // përdorim
  }
}

Kjo, megjithatë, nuk mjafton. Duhet gjithashtu të shënohet shërbimi i ri edhe në klasën e komponentit, edhe pse ai nuk përdoret direkt aty:

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

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