Ühe teenuse sisestamine teise Angularis

Projekti kallal töötamiseks võime vajada ühe teenuse sisestamist teise teenusesse, et laiendada nende funktsionaalsust. Teeme veel ühe teenuse, mis väljastab sõnumid konsooli uute andmete lisamisel.

Kõigepealt kaustas test/src/app loome faili log.service.ts. Ekspordime klassi LogService, kuhu kirjutame funktsiooni write sõnumi väljastamiseks konsooli:

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

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

Seejärel liigume oma teenusesse DataService ja impordime, süstime sisse ja kasutame oma uut teenust:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // süstime sisse
    
  }
  
  getData(): string[] {
    this.logService.write('andmed saadud'); // kasutame
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('uus element lisatud'); // kasutame
  }
}

Sellest aga ei piisa. On vaja veel kirjutada uus teenus ka komponendi klassi, kuigi seda seal otse ei kasutata:

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

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