Injisering av en tjeneste i en annen i Angular

For å jobbe med prosjektet kan vi trenge å injisere en tjeneste i en annen for å utvide deres funksjonalitet. La oss lage enda en tjeneste som vil skrive ut meldinger i konsollen når nye data legges til.

Først i mappen test/src/app oppretter vi filen log.service.ts. Vi eksporterer klassen LogService, der vi skriver funksjonen write for å skrive ut melding i konsollen:

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

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

Deretter går vi til vår tjeneste DataService og importerer, injiserer og bruker vår nye tjeneste:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // injiserer
    
  }
  
  getData(): string[] {
    this.logService.write('data mottatt'); // bruker
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('nytt element lagt til'); // bruker
  }
}

Dette er imidlertid ikke nok. Vi må også registrere den nye tjenesten i komponentklassen, selv om den ikke brukes direkte der:

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

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