Injicera en tjänst i en annan i Angular

För att arbeta med projektet kan vi behöva injicera en tjänst i en annan för att utöka deras funktionalitet. Låt oss skapa ytterligare en tjänst som kommer att skriva ut meddelanden till konsolen när nya data läggs till.

Först i mappen test/src/app skapar vi filen log.service.ts. Exportera klassen LogService, där vi skriver funktionen write för att skriva ut ett meddelande till konsolen:

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

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

Därefter går vi till vår tjänst DataService och importerar, injicerar och använder vår nya tjänst:

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

@Injectable()
export class DataService {
  private data: string[] = ['a', 'b', 'c'];
  
  constructor(private logService: LogService) { // injicerar
    
  }
  
  getData(): string[] {
    this.logService.write('data mottagen'); // använder
    return this.data;
  }
  
  addData(name: string){
    this.data.push(name);
    this.logService.write('nytt element tillagt'); // använder
  }
}

Detta är dock inte tillräckligt. Vi måste också registrera den nya tjänsten i komponentklassen, även om den inte används direkt där:

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

@Component({
  ........
  providers: [DataService, LogService] // lägger till
})