Uso de Forward References en Angular Dependency Injection
En Angular, una forward reference (referencia adelantada) se utiliza cuando una clase o proveedor no está disponible en el momento de su declaración, pero se necesita declarar su dependencia. Esto ocurre principalmente en escenarios donde existe una dependencia circular entre componentes, servicios o módulos.
Se logra utilizando el método forwardRef, que es una función importada desde el paquete @angular/core. Este método permite encapsular la referencia de una dependencia, retrasando su resolución hasta que Angular la necesite en tiempo de ejecución.
Ejemplo básico de forwardRef
Un caso común se da en la declaración de componentes o servicios dependientes:
import { Component, Inject, forwardRef } from '@angular/core';
@Component({
selector: 'app-parent',
template: `<app-child></app-child>`,
})
export class ParentComponent {
constructor(@Inject(forwardRef(() => ChildComponent)) private child: any) {}
}
@Component({
selector: 'app-child',
template: `<div>Child Component</div>`,
})
export class ChildComponent {}
En este ejemplo, ParentComponent depende de ChildComponent, pero Angular aún no sabe qué es ChildComponent en el momento de declarar la dependencia. Usar forwardRef permite que Angular resuelva esta dependencia circular.
¿Por qué utilizar Forward References?
- Dependencias circulares: Esencial para resolver escenarios donde dos entidades dependen mutuamente entre sí.
- Flexibilidad en el diseño: Permite arquitecturas más modulares y distribuidas.
- Compatibilidad: Facilita el trabajo con ciertos patrones avanzados, como la inyección de dependencias en dinámico o sistemas complejos.
Ejemplos adicionales
Proveedores personalizados con forwardRef
Cuando se configura un proveedor en un módulo o componente, se puede usar forwardRef para referirse a una clase que aún no está disponible:
import { Injectable, forwardRef } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class AService {
constructor(@Inject(forwardRef(() => BService)) private bService: BService) {}
}
@Injectable({
providedIn: 'root',
})
export class BService {
constructor(private aService: AService) {}
}
Sin forwardRef, Angular lanzaría un error porque ambas clases intentan referirse una a otra antes de ser definidas completamente.
Referencia oficial
Para más detalles, consulta la documentación oficial de Angular sobre Forward References.
Jorge García
Fullstack developer