Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Angular esencial

Conectar un servicio con múltiples componentes

¡Prueba gratis durante 10 días

nuestros 1289 cursos !

Prueba gratis Mostrar modalidades de suscripción
Una vez creado y desarrollado un servicio, es momento de configurarlo e inyectarlo dentro de los diferentes componentes. Una vez presente entre ellos, tenemos la capacidad de intercambiar datos libremente entre todos los componentes suscritos al servicio.
09:47

Transcripción

En esta lección, vamos a comunicar dos diferentes componentes a través de un servicio. Yo acá tengo un componente que está mostrando una lista de libros y tengo otro componente acá, que es un encabezado, que me debería mostrar la lista de los libros seleccionados. La idea es que mi servicio pueda recopilar la información cada vez que el usuario hace clic sobre alguno de los ítems de esta lista y la almacene para que se pueda desplegar dentro de este otro componente y podamos ver los libros seleccionados. Vamos a ir al código de esta aplicación, específicamente al archivo donde he creado el servicio previamente a través de la línea de comandos. En este caso, el archivo se llama'librosseleccionados. service. ts'. Yo ya tengo implementado este servicio dentro de mi aplicación y voy a comenzar a generar algún código para poder desplegar los libros seleccionados. En este caso, voy a crear una variable llamada'libros' que va a ser de tipo'array' y a este'array'le vamos a inyectar objetos. Dentro del constructor de mi servicio, yo voy a definir que'this'punto'libros' sea un'array'vacío y voy a generar dos métodos: el primero va a ser 'mostrar libros' y el segundo método se va a llamar 'agregar libros'. Este método, 'agregar libros', lo voy a incluir dentro del componente de la lista para poder ir inyectando los diferentes libros que el usuario seleccione. Por otro lado, este segundo método lo voy a utilizar dentro del componente del encabezado para desplegar los libros que el usuario seleccionó. Así que'agregar libros', en este caso, lo que va a hacer es que va a recibir un libro y por ende vamos a incluirle acá un parámetro, que va a ser'nuevoLibro', donde vamos a inyectar el valor de ese libro y vamos a incluir un comando que va a ser'this'punto'libros' punto'push', que es un comando de JavaScript que lo que va a hacer es que va a inyectar un nuevo elemento dentro del arreglo 'libros'. En este caso, vamos a inyectar el libro seleccionado. Por otro lado, 'mostrarLibros', voy a incluirle un código que me devuelva dos diferentes condiciones. En el primer caso voy a incluir una condicional que me va a decir que en el caso de que'libros'sea un "array" que tiene más de un elemento, me devuelva el valor que se encuentra dentro de ese "array". En caso de que'libros'se encuentre vacío, me va a devolver el valor'false'. Esto me va a servir a mí después para utilizar la lógica y desplegar u ocultar los elementos en pantalla. Ahora ya tengo listo lo que va a ser mi servicio y voy a guardar el código. Y ahora me voy a ir a implementar esto dentro de los diferentes elementos. Primero voy a ir a la lista de libros. En este caso es un componente llamado'lista-de-libros' y voy a buscar específicamente el código de este componente. En este caso, lo que vamos a hacer es que vamos a importar el servicio que ya tenemos creado en nuestra aplicación. Yo voy a ir acá al módulo principal de mi aplicación y voy a copiar acá la forma en que estoy importando el servicio dentro de mi aplicación. Voy a ir al componente, en este caso'lista-de-libros. component'y voy a importar mi servicio. Voy a pegar el código y si lo pego directamente, me va a dar un error. Esto, porque, aunque lo estoy importando correctamente, necesito incluir acá, en vez de punto, incluir la notación punto, punto, porque me encuentro dentro de una carpeta superior; ahí es donde se encuentra mi servicio. Ahora, este servicio ya se encuentra importado dentro de mi componente. ¿Qué significa esto? Que ahora'lista-de-libros', donde se encuentra la lista de libros, puede inyectar información a mi servicio. Entonces, vamos a aprovechar eso y vamos a crear ahora dentro del constructor una variable que va a ser de tipo'public'. Y en este caso esta variable la vamos a llamar'libros seleccionados' y vamos a definir que sea de tipo 'LibrosseleccionadosService'. Ahora ya tenemos esta variable definida y vamos a utilizarla para generar un método. Este método que vamos a crear se va a llamar'agregaLibro', lo que significa que nos va a permitir a nosotros agregar un libro desde la lista de libros. En este caso, lo que voy a hacer es que yo voy a tomar el valor que se encuentra dentro de alguno de los ítems que están en la lista, o sea, voy a tomar este método y vamos a ir a la plantilla de la lista. Tenemos acá un enlace que básicamente lo que hace es que cuando nosotros hacemos clic sobre el título de un libro, nos va a mostrar la siguiente pantalla donde se encuentran los detalles, pero en este caso yo voy a agregar un método oculto a través de elemento'click'. Esto lo voy a hacer a través de la anotación'click' y voy a decir que cuando el usuario haga clic, invoque el método'agregarLibro'. Y el valor que voy a poner acá va a ser el de la instancia, en este caso'libro', y voy a inyectar el valor que se encuentra dentro de este ítem que es el valor del libro directamente. Ahora yo ya tengo disponible este valor dentro de mi método y lo que voy a hacer es que voy a llamar al servicio a través de'this' punto 'librosseleccionados' y voy a llamar la propiedad que se encuentra en mi servicio, que ya definí antes, que es'agregarLibros' y voy a inyectar el libro en el que el usuario hizo clic. Ahora mi servicio ya tiene acceso al libro que hagamos clic. Vamos a cerrar por ahora. Vamos a cerrar los diferentes elementos que estamos trabajando para mantener un poco de orden dentro de nuestra aplicación. Y vamos a ir, entonces, al encabezado. El encabezado, por otro lado, va a utilizar la información que se encuentra dentro de este servicio. Para tener acceso a la información del servicio, vamos a importarlo también. Así que vamos a ir al módulo principal, copiamos otra vez el código de nuestro servicio. Vamos a ir al código de nuestro componente e importamos el servicio. Ahora también el encabezado tiene acceso al código y la información que se encuentra dentro de nuestro servicio. En este caso, lo que vamos a hacer es que simplemente yo voy a crear una variable dentro del constructor y al crear esta variable, que va a ser'librosseleccionados', de tipo 'librosseleccionadosService', esta variable se encuentra disponible dentro del componente, así que directamente me voy a ir al código y voy a buscar la sección donde se está mostrando por ahora los elementos, en este caso estáticos, del código y lo voy a reemplazar por un código dinámico, /. Así que vamos a reemplazar este código y lo que voy a hacer es que voy a modificarlo donde, en este caso, voy a mostrar la lista en el caso de que 'librosseleccionados' 'mostrarLibros'me dé información. Recordemos que este método, que está dentro del servicio, me va a mostrar'false'en caso de que no haya información o, en caso de que tenga información, me va a mostrar una lista de elementos. Sabiendo eso, yo estoy desarrollando acá la directiva'ngFor' y voy a crear una lista que me va a mostrar todos los libros que se encuentran almacenados dentro de mi servicio. Vamos a guardar y vamos a ver el resultado de nuestra aplicación. Tenemos acá nuestra lista. Recordemos que, al hacer clic sobre esta lista, estamos llamando también un evento clic que está guardando la información de este libro. Así que voy a hacer clic, en este caso, sobre El retrato de Dorian Grey. Pero antes quiero que notes que me está mostrando la información de esta lista vacía. Ahora vamos a hacer clic sobre este primer ítem. Vemos la información, volvemos a'lista-de-libros' y si yo abro esta sección ya tenemos un ítem guardado. Voy a dejarlo abierto y voy a hacer clic sobre otro libro, por ejemplo, Don Quijote, y vemos que ya se está mostrando la información de Don Quijote. No importa en qué parte de la aplicación yo esté, me va a mostrar los datos. Ahora, un detalle importante: la información que se guarda en los servicios va a estar viva durante el tiempo de vida útil de nuestra aplicación. Y el tiempo de vida útil de nuestra aplicación va a ser mientras esté cargada de memoria. Lo que significa que si yo refresco o salgo de la página, me va a borrar la información. Vemos que se borró la información. Mientras yo me encuentre trabajando en mi aplicación, por ejemplo, acá, haciendo una navegación interna dentro de Angular, yo voy a poder guardar todos los libros. Puedo ocultar, mostrar y voy a tener conectados de esta forma dos diferentes componentes enviando información entre sí sin romper el encapsulamiento de Angular a través de los servicios.

Angular esencial

Aprende a crear aplicaciones con Angular y avanza poco a poco en su uso, empezando por la instalación, configuración y arquitectura hasta la publicación final de una aplicación.

4:27 horas (35 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:29/06/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.