Angular: ¿cómo narices compartimos datos/lógica entre varios Component?
Siguiendo el curso de Deborah Kurata, en este artículo quiero explicar lo básico que he aprendido:
En la parte 1 vimos lo básico de Angular
En la parte 2 vimos como añadir lógica al html
En la parte 3 vimos el data binding y las pipes
En la parte 4 vimos interfaces, pipes, el ciclo de vida.
En la parte 5 vimos como anidar Component.
¿Qué hacemos con los datos que no tienen relación directa con un Component, o que queremos compartir a lo largo de varios de ellos?, construimos Services.
Nuestros Component necesitan de ciertos servicios, como la carga de datos de la BD, o el sistema de registro, logging:
En concreto los servicios son:
Clases con un propósito, independiente de cualquier Component, dando datos o lógica compartida entre Components y además encapsula la comunicación con elementos externos.
Hasta ahora hemos escrito la lista de productos de forma directa en el product list component, pero en esta lección lo extraeremos a un Service:
Definición de inyección de dependencias 4
Usando nuestro ProductService 11
¿Cómo funciona?
La idea es registrar el servicio en angular para que éste se encargue de crear una sola instancia del servicio:
Luego en cada Component que necesite ese Service, se inyecta en el constructor:
Definición de inyección de dependencias
Es un patrón con el cual una clase recibe las instancias de los objetos que necesita, las cuales son las dependencias, desde una fuente externa en vez de crearlas por si mismo.
Construyendo un servicio
Los pasos son:
Crear la clase del Service, definir los metadatos con un decorador e importar lo que necesitamos, son los mismos pasos que para crear un Component.
Primero escribimos la clase del Service:
Segundo, le ponemos el decorador:
Luego importamos lo que hace falta:
Además para retornar la lista de productos escribimos los mismos en el método:
Registrando el servicio
La idea es registrar el servicio en angular para que él lo gestione:
Para registrarlo, hay que tener en cuenta que lo podemos registrar en un Component directamente. La cuestión es qué hacemos si queremos que se use en toda la aplicación. Deberíamos ponerlo en el Component más externo: AppComponent, porque al registrarlo ahí, todos sus hijos lo tienen disponible:
Para ello necesitamos registrarlo en el decorador, mediante la etiqueta providers: la cual emplea un array donde se le indica el nombre de las clases que actúan como Service:
Inyectando el Service
Necesitamos definir nuestro Service como una dependencia del Component que la usa, nuestra product list, para ello angular nos provee el mecanismo para inyectar dependencias:
Para implementar la inyección de dependencias:
Nos creamos una variable, y le asignamos la instancia del Service mediante el constructor.
Además en TypeScript hay una forma abreviada:
Donde se crea la variable e inicializa directamente en el constructor.
Usando nuestro ProductService
Primero borramos los productos escritos en product list:
Luego llamamos al ProductService. Para ello, necesitamos usar uno de los métodos del ciclo de vida del component, usaremos ngOnInit():
Luego como el constructor se ejecuta antes que ngOnInit(), hay que mover el array de filteredProducts, ya que si no estaría vacía:
Y quitamos el filtro por defecto para ver todos los productos:
Así que ahora veremos los productos que nos devuelve ProductService, que son más que los que teníamos:
Resumen de lo aprendido
Hemos visto cómo funcionan los Service. Cómo se construyen, registran e inyectan.
Por tanto en nuestra aplicación:
Ya tenemos nuestro ProductService.
Repositorio de la autora para los archivos de inicio
https://github.com/DeborahK/Angular-GettingStarted
