Navegando por la Evolución de Angular: La nueva función inject
Los servicios de Angular o "inyectables" son una de las mejores características de Angular, ya que permite encapsular funcionalidad reutilizable, como la obtención de datos, registro o autenticación.
Angular 14 introdujo características emocionantes, incluyendo la función inject() que reemplaza la inyección tradicional por constructor.
Antes: Usando Inyección por Constructor
El método tradicional era que las dependencias se inyectan a través del constructor, haciéndolas disponibles a lo largo del ciclo de vida del componente.
Ejemplo: Sin inject()
@Component({
selector: 'app-entity',
template: `<div>{{ entity$ | async }}</div>`
})
export class EntityComponent implements OnInit {
entity$ = this.http.get(`/api/entity/${this.route.snapshot.paramMap.get('id')}`);
constructor(private http: HttpClient, private route: ActivatedRoute) {}
ngOnInit() {}
}
Después: Usando la Función inject()
La función inject() de Angular permite inyectar dependencias sin inyección por constructor, lo que simplifica la lógica del componente y continúa empujando a Angular hacia un estilo de programación más funcional.
Ejemplo: Con inject()
const fetchEntity = () => {
const http = inject(HttpClient);
const route = inject(ActivatedRoute);
return http.get(`/api/entity/${route.snapshot.paramMap.get('id')}`);
};
@Component({
selector: 'app-entity',
template: `<div>{{ entity$ | async }}</div>`
})
export class EntityComponent {
entity$ = fetchEntity();
}
Entendiendo Ambos Enfoques
Ok Freddy, pero si el inyector por constructor ya no es necesario, ¿por qué necesito aprender o entender esto?
- Proyectos Legados: Muchos proyectos existentes de Angular usan inyección por constructor.
- Transición e Integración: Conocer ambos métodos ayuda a integrar nuevas características en proyectos antiguos sin reescrituras extensas.
- Conocimiento Integral: Entender la evolución de la inyección de dependencias en Angular mejora tu versatilidad como desarrollador.
Conclusión
La función inject() ofrece una manera más limpia de manejar dependencias en componentes de Angular, enfocándose en la lógica de la interfaz de usuario. Sin embargo, entender tanto la inyección por constructor como la función inject() es crucial para mantener y actualizar aplicaciones de Angular de manera efectiva.
La capacidad de la función inject() para ser utilizada en métodos del ciclo de vida, directivas y tuberías la convierte en una herramienta poderosa para el desarrollo moderno de Angular.