Inyección de Servicios en un Componente
Has creado el TaskService, que se encarga de almacenar y gestionar la lista de tareas. Sin embargo, el servicio por sí solo no interactúa con la interfaz de usuario. Para obtener los datos del servicio en la plantilla del componente, es necesario inyectar el servicio en el componente correspondiente.
Ahora verás cómo Angular ayuda automáticamente a conectar servicios con componentes utilizando la Inyección de Dependencias (DI) y cómo funciona el servicio dentro del componente.
¿Qué es la Inyección de Dependencias?
Inyección de Dependencias (DI) es un patrón de diseño donde Angular inyecta automáticamente las dependencias requeridas (como servicios) en el constructor de un componente.
Gracias a DI, los componentes no crean instancias de servicios por sí mismos — simplemente reciben una instancia ya creada. Angular se encarga de proporcionar los objetos necesarios a quienes los requieran.
Esto funciona porque el servicio está decorado con:
@Injectable({
providedIn: 'root'
})
Este decorador indica a Angular que cree una única instancia (singleton) del servicio para toda la aplicación y la ponga a disposición para DI.
Inyección del Servicio en un Componente
Ahora, vamos a inyectar el TaskService en el TaskListComponent para que pueda obtener la lista de tareas e interactuar con ella.
Así es como se ve el código del componente:
task-list.ts
Importamos el TaskService, la interfaz Task y otros componentes y módulos necesarios para la plantilla.
En el constructor del componente, agregamos el servicio mediante Inyección de Dependencias:
task-list.ts
Se almacena como un campo privado para utilizarlo en los métodos del componente. Justo después de que se crea el componente (dentro del constructor), obtenemos la lista de tareas. Esta lista se utiliza luego en la plantilla HTML.
Los métodos deleteTask y toggleStatus llaman a las funciones del servicio para eliminar una tarea o cambiar su estado, y luego actualizan el arreglo local tasks para que la interfaz de usuario refleje los cambios.
Este enfoque mantiene el componente sencillo: no sabe cómo se almacena o maneja la información — simplemente solicita al servicio que la actualice. Esto separa las responsabilidades: los componentes gestionan la vista y los servicios gestionan los datos.
1. ¿Qué es la Inyección de Dependencias (DI) en Angular?
2. ¿Por qué actualizamos this.tasks después de llamar a deleteTask o toggleStatus?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 3.13Inyección de Servicios en un Componente
Desliza para mostrar el menú
Has creado el TaskService, que se encarga de almacenar y gestionar la lista de tareas. Sin embargo, el servicio por sí solo no interactúa con la interfaz de usuario. Para obtener los datos del servicio en la plantilla del componente, es necesario inyectar el servicio en el componente correspondiente.
Ahora verás cómo Angular ayuda automáticamente a conectar servicios con componentes utilizando la Inyección de Dependencias (DI) y cómo funciona el servicio dentro del componente.
¿Qué es la Inyección de Dependencias?
Inyección de Dependencias (DI) es un patrón de diseño donde Angular inyecta automáticamente las dependencias requeridas (como servicios) en el constructor de un componente.
Gracias a DI, los componentes no crean instancias de servicios por sí mismos — simplemente reciben una instancia ya creada. Angular se encarga de proporcionar los objetos necesarios a quienes los requieran.
Esto funciona porque el servicio está decorado con:
@Injectable({
providedIn: 'root'
})
Este decorador indica a Angular que cree una única instancia (singleton) del servicio para toda la aplicación y la ponga a disposición para DI.
Inyección del Servicio en un Componente
Ahora, vamos a inyectar el TaskService en el TaskListComponent para que pueda obtener la lista de tareas e interactuar con ella.
Así es como se ve el código del componente:
task-list.ts
Importamos el TaskService, la interfaz Task y otros componentes y módulos necesarios para la plantilla.
En el constructor del componente, agregamos el servicio mediante Inyección de Dependencias:
task-list.ts
Se almacena como un campo privado para utilizarlo en los métodos del componente. Justo después de que se crea el componente (dentro del constructor), obtenemos la lista de tareas. Esta lista se utiliza luego en la plantilla HTML.
Los métodos deleteTask y toggleStatus llaman a las funciones del servicio para eliminar una tarea o cambiar su estado, y luego actualizan el arreglo local tasks para que la interfaz de usuario refleje los cambios.
Este enfoque mantiene el componente sencillo: no sabe cómo se almacena o maneja la información — simplemente solicita al servicio que la actualice. Esto separa las responsabilidades: los componentes gestionan la vista y los servicios gestionan los datos.
1. ¿Qué es la Inyección de Dependencias (DI) en Angular?
2. ¿Por qué actualizamos this.tasks después de llamar a deleteTask o toggleStatus?
¡Gracias por tus comentarios!
