Comunicación entre componentes de Angular

Name: Comunicación entre componentes de Angular
Author: Michaela Ochnich

Este capítulo demostrará diferentes formas en que puede enviar información entre componentes, dependiendo de su relación entre sí. Aprenderá a pasar…

Preview the first lesson free — get full access to all 7 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

Esta lección le mostrará cómo usar la propiedad de entrada para enviar información de un componente principal a un componente secundario. Así que aquí tengo una aplicación de inicio. que se generó con la CLI de Angular. Y primero, voy a generar un componente principal. y un componente hijo para pasar información entre ellos. Y aquí me salté la generación del archivo de prueba. y el archivo CSS separado. Y luego, en la plantilla del componente de la aplicación raíz, Voy a borrar todo el código de inicio y luego agregue ese componente principal. Así que ahora que está configurado, Voy a abrir la plantilla principal y luego incrustar en ese el componente secundario. Así que ahora que, ese componente secundario está en el componente principal, Voy a abrir la clase de componente infantil, y luego voy a importar el decorador de entrada de la biblioteca del núcleo de Angular. Por lo tanto, las propiedades de entrada se pueden usar para enviar información. de un componente padre a un componente hijo, y mantiene esa información sincronizada. Entonces, a continuación, declararé una propiedad de entrada en la clase de componente hijo. Entonces, el decorador de entrada es lo que marca el mensaje. como una propiedad de entrada, y una propiedad de entrada está vinculada a una propiedad en el Dom. En este caso, se vinculará en el componente principal. Cuando se actualiza esa propiedad en el Dom del padre, Angular actualizará esta propiedad de entrada en la clase de componente hijo también, que es lo que mantiene esos datos sincronizados. Así que aquí tengo la propiedad configurada con un operador de asignación definido ya que esta propiedad va a recibir su valor inicial del padre. Sin embargo, también puede establecer un valor predeterminado para la propiedad como tal. Entonces aquí, si este componente no se inicializó de ninguna manera sin que la propiedad de entrada esté vinculada en el componente principal, entonces este valor de mensaje sería bienvenida por defecto. Y a continuación mostraré este mensaje en la plantilla del componente secundario. Entonces, ahora que el componente secundario está configurado para recibir ese valor de entrada, el padre necesita pasar ese valor al niño. Entonces, primero en la clase de componente principal, Definiré un mensaje para transmitir. Luego, en la plantilla principal, Vincularé esto a la propiedad de entrada de los componentes secundarios. Entonces aquí estoy usando el enlace de propiedad, que se hace con los corchetes para vincular la variable de mensaje principal a la propiedad de entrada del mensaje que se creó en el componente secundario. Y luego, viendo eso en el navegador, puede ver el mensaje que se estableció en el componente principal se pasa y se muestra en el componente secundario. Por lo tanto, es posible que a veces desee hacer referencia a ese valor de entrada por un nombre diferente dentro de la clase de componente hijo. En esos casos, puede crear un alias para la propiedad de entrada. Volviendo a la clase de componentes secundarios, Cambiaré el nombre de esta propiedad a mensaje principal. Y luego en el decorador de entrada, pasar el nombre de la propiedad que el componente principal es vinculante para. En este caso, ese es el mensaje. Y ahora que el componente hijo sabe esta propiedad de entrada como mensaje principal, la plantilla debe actualizarse. Y luego ver eso en el navegador puedes ver eso, ese mensaje todavía se está pasando de padres a hijos. Así que eso es todo por esta lección sobre cómo usar las propiedades de entrada para comunicarse del componente principal al secundario. Y en la próxima lección, aprenderá a interceptar cualquier cambio de valor de entrada usando setters y getters.

Intermedio Proveedor : Michaela Ochnich 7 lecciones · 36m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

Este capítulo demostrará diferentes formas en que puede enviar información entre componentes, dependiendo de su relación entre sí. Aprenderá a pasar información de padre a hijo, de hijo a padre o en ambos sentidos entre dos componentes. También aprenderá a interceptar algunos de estos cambios de datos y modificarlos si es necesario antes de usarlos en el componente.

Lo que aprenderás

Enviar datos de un componente padre a un componente hijo usando Input, Setters y Getters, y OnChanges
Enviar datos de un componente hijo a un componente padre usando Output y EventEmitter
Acceder a un componente hijo a través de la plantilla o clase del padre usando ViewChild y Variables de Referencia
Comunicarse bidireccionalmente entre dos componentes
Interceptar cambios de datos y alterarlos antes de usarlos en el componente
Compartir datos entre componentes usando un Servicio Compartido

Puntos clave

La forma en que te comunicas entre componentes de Angular depende de su relación entre sí.
La información puede pasar de padre a hijo, de hijo a padre, o de ambas formas entre dos componentes.
Algunos cambios de datos pueden ser interceptados y alterados antes de ser usados en el componente.
Un padre puede acceder a un componente hijo a través de la plantilla o clase del padre.
Un servicio compartido es un enfoque para comunicarse entre componentes.

Preguntas frecuentes

¿Qué cubre este curso?

Este capítulo demuestra diferentes formas de enviar información entre componentes de Angular dependiendo de su relación, incluyendo pasar datos de padre a hijo, de hijo a padre, o bidireccionalmente entre dos componentes, e interceptar cambios de datos para alterarlos antes de usarlos.

¿Qué aprenderé a hacer en este curso?

Aprenderás cómo enviar datos de un componente hijo a un componente padre, enviar datos de un componente padre a un componente hijo, acceder a un componente hijo a través de la plantilla o clase del padre y comunicarte bidireccionalmente entre dos componentes.

¿Qué temas o técnicas se enseñan en las lecciones?

Las lecciones cubren Input, Setters y Getters, OnChanges, Output y EventEmitter, ViewChild, Servicio Compartido y Variables de Referencia.

¿Qué habilidades ayuda a desarrollar este curso?

Desarrolla habilidades en Componentes de Angular, Diagramas de Comunicación, Diagrama de Componentes, Bibliotecas de Componentes, Componentes Conectados y Componentes HTML.

¿Puedo aprender a modificar datos antes de que un componente los use?

Sí. El curso enseña cómo interceptar algunos de estos cambios de datos y alterarlos si es necesario antes de usarlos en el componente.