Serviços Opcionais em Angular

Um serviço pode ser opcional, ou seja, não obrigatório. Por exemplo, no tema anterior, foi criado o serviço LogService:

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

E havia outro serviço, DataService, que utilizava o LogService:

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");
  }
}

Suponhamos que, por algum motivo, o serviço LogService não esteja disponível para injeção, como, por exemplo, quando não o adicionamos nos provedores do componente AppComponent:

import { Component } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { DataService } from "./data.service";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [FormsModule],
  providers: [DataService], // Apenas o DataService foi adicionado
  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();
  }
}

Se rodarmos a aplicação neste cenário, obteremos um erro, pois o serviço LogService não possui um provedor definido. Para lidar com isso, podemos tornar o serviço LogService opcional, utilizando o decorador Optional. Vamos modificar o código do DataService:

import { Injectable, Optional } from "@angular/core";
import { LogService } from "./log.service";

@Injectable()
export class DataService {
  private data: string[] = ["Tom", "Bob", "Sam"];

  constructor(@Optional() private logService: LogService) {}

  getData(): string[] {
    if (this.logService) {
      this.logService.write("Operação de obtenção de dados");
    }
    return this.data;
  }

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

Assim, no construtor da classe, recebemos o serviço como opcional:

constructor(@Optional() private logService: LogService) {}

Depois, ao acessar o serviço, verificamos se ele está disponível e, se estiver, utilizamos suas funcionalidades:

if (this.logService) {
  this.logService.write("Operação de obtenção de dados");
}

Nesse caso, o console não exibirá nada, já que o serviço não foi injetado no AppComponent.