Serviços Opcionais - 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.