Cómo usar la inyección de dependencias en Angular
La inyección de dependencias (Dependency Injection o DI) en Angular es un patrón de diseño que permite gestionar y suministrar instancias de servicios y otros objetos a componentes y clases de manera eficiente. Facilita la separación de responsabilidades y mejora la escalabilidad y mantenibilidad del código. Angular proporciona un sistema de DI robusto que permite definir dependencias a nivel de aplicación, módulo o componente.
¿Qué es la inyección de dependencias en Angular y cómo funciona?
La inyección de dependencias en Angular consiste en declarar las dependencias (como servicios) que un componente necesita, para que el framework las inyecte automáticamente. Se basa en tres elementos principales:
1. Proveedor (Provider): Define cómo crear y suministrar la dependencia.
2. Inyector (Injector): El contenedor que mantiene la lógica de creación de dependencias.
3. Dependencia (Dependency): El servicio u objeto que se inyecta.
Para inyectar un servicio en un componente, primero debes definirlo y luego agregarlo como dependencia en el constructor del componente. Angular se encarga de crear la instancia del servicio y proporcionarla cuando el componente la necesita.
Ejemplo básico de inyección de dependencias
1. Crear un servicio (mi-servicio.service.ts):
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class MiServicio {
obtenerSaludo() {
return '¡Hola desde el servicio!';
}
}
2. Inyectar el servicio en un componente (app.component.ts):
import { Component } from '@angular/core';
import { MiServicio } from './mi-servicio.service';
@Component({
selector: 'app-root',
template: `<h1>{{ mensaje }}</h1>`
})
export class AppComponent {
mensaje: string;
constructor(private miServicio: MiServicio) {
this.mensaje = this.miServicio.obtenerSaludo();
}
}
En este ejemplo, se inyecta MiServicio en el constructor de AppComponent, y el mensaje del servicio se asigna a una variable para mostrarlo en la plantilla del componente.
Ejemplos adicionales de Dependency Injection
1. Inyectar dependencias a nivel de módulo:
En el archivo app.module.ts:
providers: [MiServicio]2. Inyectar dependencias específicas a un componente:
@Component({
selector: 'app-ejemplo',
providers: [MiServicio]
})Esto limita el alcance del servicio solo a ese componente.
Referencia oficial
Consulta más detalles en la documentación oficial de Angular sobre Dependency Injection.
Jorge García
Fullstack developer