Nov 3, 2024

Tienes que conocer "Inject" en angular

angular

frontend

En mi experiencia personal, la inclusión de la función inject llegó justo en un momento en que estaba completamente inmerso en varios proyectos, sin tiempo para seguir de cerca las actualizaciones de Angular. Cuando finalmente la descubrí, al inicio de Angular 16, marcó un antes y un después en mi forma de programar. inject no solo me ahorró muchas líneas de código, sino que también mejoró la legibilidad y modularidad de mis proyectos. Es una de esas funciones que, una vez que la pruebas, se vuelve indispensable.

En proyectos de Angular, la inyección de dependencias suele realizarse a través del constructor de clases. Sin embargo, desde Angular v14, la función inject permite una nueva forma de acceder a las dependencias, simplificando el código y eliminando la necesidad de inyectar dependencias directamente en el constructor. Esto puede ahorrar cientos de líneas de código, especialmente en aplicaciones con una arquitectura compleja.

¿Qué es inject en Angular?

La función inject permite obtener servicios dentro de componentes, directivas o servicios sin necesidad de definirlos en el constructor. Funciona como un reemplazo de la inyección de dependencias tradicional, pero sin acoplar el código a la clase en sí.

En lugar de escribir:

export class MyService {
  constructor(private MyService: OtherService) {}
}

podemos utilizar inject de la siguiente manera:

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

export class MyService {
  private MyService = inject(OtherService);
}

Ventajas de Usar inject

Reducción de Código: Al no necesitar los parámetros en el constructor, el código es más limpio y ocupa menos líneas.
Menos Dependencias en Componentes: Es útil en funciones y propiedades estáticas, donde antes no podíamos acceder a los servicios inyectados.
Refactorización Más Fácil: Con inject, es más fácil mover la lógica entre funciones sin tener que pasar dependencias adicionales.

Ejemplo de herencia

Imagina un escenario donde tienes un ParentService abstracto que es extendido por múltiples clases hijas. Con la inyección tradicional en el constructor, cada clase hija debe importar las dependencias solo para pasarlas a la clase padre. Así es como se vería esto:


export abstract class ParentService {
  constructor(
    protected readonly configKey: string,
    protected readonly httpClient: HttpClient,
    protected readonly helperService: HelperService,
  ) {}
}
@Injectable({ providedIn: 'root' })
export class ChildService extends ParentService {
  constructor(
    protected readonly httpClient: HttpClient,
    protected readonly helperService: HelperService,
  ) {
    super('config-key', httpClient, helperService);
  }
}

Utilizando inject() y eliminando los redundantes imports.

export abstract class ParentService {
  protected abstract readonly configKey: string;
  protected readonly httpClient = inject(HttpClient);
  protected readonly helperService = inject(HelperService);
}
@Injectable({ providedIn: 'root' })
export class ChildService extends ParentService {
  protected readonly configKey = 'config-key';
}

Conclusión