Angular: Servicios e inyección de dependencias

En Angular 18, los servicios y la inyección de dependencias juegan un papel crucial en la arquitectura y desarrollo de aplicaciones. Los servicios permiten organizar y reutilizar código, mientras que la inyección de dependencias facilita la gestión de dependencias entre los componentes. A continuación, se explorarán los conceptos y prácticas recomendadas para trabajar con servicios e inyección de dependencias en Angular 18.

Creación de servicios en Angular 18

Para crear un servicio en Angular 18, se utiliza el decorador @Injectable(). Este decorador indica que el servicio puede ser inyectado en otros componentes o servicios.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MiServicio {
  constructor() { }

  obtenerDatos(): string {
    return 'Datos del servicio';
  }
}

En este ejemplo, el servicio MiServicio está disponible en toda la aplicación gracias a la opción providedIn: 'root'. Esto asegura que Angular gestione una única instancia del servicio.

Inyección de dependencias en componentes

Para utilizar un servicio en un componente, se inyecta a través del constructor del componente.

import { Component, OnInit } from '@angular/core';
import { MiServicio } from './mi-servicio.service';

@Component({
  selector: 'app-mi-componente',
  template: `<p>{{ datos }}</p>`
})
export class MiComponente implements OnInit {
  datos: string;

  constructor(private miServicio: MiServicio) { }

  ngOnInit() {
    this.datos = this.miServicio.obtenerDatos();
  }
}

En este ejemplo, el servicio MiServicio se inyecta en el componente MiComponente y se utiliza en el método ngOnInit para obtener datos.

Inyección de dependencias jerárquica

Angular 18 permite definir servicios con diferentes alcances (scopes). Por defecto, los servicios definidos con providedIn: 'root' son singleton y están disponibles en toda la aplicación. Sin embargo, es posible limitar el alcance de un servicio a un módulo o un componente específico.

Alcance en módulos

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MiModuloComponent } from './mi-modulo.component';
import { MiServicio } from './mi-servicio.service';

@NgModule({
  declarations: [MiModuloComponent],
  imports: [CommonModule],
  providers: [MiServicio]
})
export class MiModulo { }

En este ejemplo, MiServicio está disponible solo para los componentes del módulo MiModulo.

Alcance en componentes

import { Component } from '@angular/core';
import { MiServicio } from './mi-servicio.service';

@Component({
  selector: 'app-mi-componente',
  template: `<p>{{ datos }}</p>`,
  providers: [MiServicio]
})
export class MiComponente {
  datos: string;

  constructor(private miServicio: MiServicio) {
    this.datos = this.miServicio.obtenerDatos();
  }
}

En este caso, MiServicio está disponible únicamente para el componente MiComponente y sus descendientes. Esto es útil para encapsular servicios que solo son relevantes para una parte específica de la aplicación.

Uso de Injector para inyección manual

Angular 18 también permite la inyección manual de dependencias utilizando la clase Injector.

import { Component, Injector } from '@angular/core';
import { MiServicio } from './mi-servicio.service';

@Component({
  selector: 'app-mi-componente',
  template: `<p>{{ datos }}</p>`
})
export class MiComponente {
  datos: string;

  constructor(private injector: Injector) {
    const miServicio = this.injector.get(MiServicio);
    this.datos = miServicio.obtenerDatos();
  }
}

Este enfoque es útil cuando se necesita resolver dependencias dinámicamente en tiempo de ejecución.