Implementando um Serviço em Outro Serviço - Angular

É bastante comum a necessidade de utilizar um serviço dentro de outro. Por exemplo, no tema anterior, foi criado um serviço para trabalhar com dados. Mas o que fazer se precisarmos registrar todas as operações realizadas com esses dados? Para esse propósito, criaremos um novo serviço de log. Vamos adicionar um novo arquivo chamado log.service.ts na pasta src/app, com o seguinte conteúdo:

export class LogService {
 
  write(logMessage: string) {
      console.log(logMessage);
  }
}

O método write definido no serviço é responsável por registrar uma mensagem no console.

Agora, vamos usar esse serviço no código. Para isso, alteramos o arquivo data.service.ts do tema anterior da seguinte maneira:

import { Injectable } from "@angular/core";
import { LogService } from "./log.service";
  
@Injectable()
export class DataService {
  
    private data: string[] = ["Tom", "Bob", "Sam"];
    constructor(private logService: LogService) {}
      
    getData(): string[] {
        this.logService.write("Operação de obtenção de dados");
        return this.data;
    }

    addData(name: string) {
        this.data.push(name);
        this.logService.write("Operação de adição de dados");
    }
}

Para que o serviço possa utilizar outros serviços, aplicamos o decorador @Injectable à classe. Esse decorador garante que o mecanismo de injeção de dependências do Angular possa criar um objeto dessa classe e injetar outro objeto (seja outro serviço ou componente) como dependência.

Existe uma recomendação geral dos desenvolvedores do Angular para sempre aplicar o @Injectable em qualquer classe de serviço. No exemplo anterior, conseguimos utilizar o serviço dentro de um componente sem o decorador, mas ele é necessário quando o serviço que estamos injetando também possui suas próprias dependências, como é o caso do DataService.

Além disso, como o DataService depende do LogService, precisamos registrar o LogService na lista de provedores do AppComponent:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { DataService } from "./data.service";
import { LogService } from "./log.service";
  
@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],
    providers: [DataService, LogService],
    template: `<div>
        <div><input [(ngModel)]="name" />
            <button (click)="addItem(name)">Adicionar</button>
        </div>
        <ul>
        @for(item of items; track $index){
            <li>{{item}}</li>
        }
        </ul>
    </div>`
})
export class AppComponent { 
        
    items: string[] = [];
    name: string = "";
    
    constructor(private dataService: DataService){}
        
    addItem(name: string){
        this.dataService.addData(name);
    }

    ngOnInit(){
        this.items = this.dataService.getData();
    }
}

Mesmo que o LogService não seja utilizado diretamente no AppComponent, ele é usado no DataService, que é chamado no AppComponent.

Ao realizar operações com os dados, o serviço LogService registrará as mensagens no console do navegador.