Comunicarse entre componentes no relacionados
Para comunicarse entre los subárboles del DOM (y, en algunas circunstancias, entre distintas ventanas de navegador con sesión iniciada en la misma organización), utilice el Servicio de mensajería Lightning (LMS). LMS es un servicio de publicación y suscripción que facilita la comunicación entre componentes web Lightning, componentes de Aura y páginas de Visualforce.
Utilice LMS para la comunicación entre componentes no relacionados, a menos que controle ambos componentes y un principal en común. Si bien LMS es potente, efectivo y fácil de utilizar, no se vea tentado a utilizarlo cuando no sea necesario. Activar eventos de DOM es mucho más eficiente. Si necesita comunicarse entre componentes con un elemento principal que no puede controlar, como dos divisiones del Generador de aplicaciones, el Servicio de mensajería Lightning es la opción perfecta.
Una tercera unidad de negocio desea participar del proyecto de manipulación de números. Necesita que el recuento anterior y el recuento actual estén juntos en su propio componente para poder mostrarlos siempre que sea necesario. Para comenzar, creemos el canal de mensajes, de forma que esté listo para que lo utilicen los componentes.
Crear un canal de mensajes Lightning
- En Visual Studio Code, en la carpeta default, cree una carpeta llamada
messageChannels
.
- En la carpeta messageChannels, cree un archivo llamado
Count_Updated.messageChannel-meta.xml
.
- En Count_Updated.messageChannel-meta.xml, pegue el siguiente código:
- Guarde e implemente el archivo.
Crear el componente de editor
- Cree un componente web Lightning denominado
remoteControl
.
- Sustituya el contenido de remoteControl.js por el siguiente código:Importamos
publish
yMessageContext
del Servicio de mensajería Lightning. También importamos el canal que acabamos de crear (Count_Updated__c
). La carga de datos se envía a la funciónpublish
.
- Guarde el archivo.
- Abra el archivo remoteControl.html y agregue este código entre las etiquetas
template
:Tenga en cuenta que utilizamos el componente controls.
- Guarde el archivo.
- Actualice remoteControl.js-meta.xml para que el componente remoteControl esté disponible en las páginas de la aplicación Lightning:
- Guarde el archivo.
Crear el componente de suscriptor
- Cree un componente web Lightning denominado
counts
.
- Sustituya el contenido de counts.js por el siguiente código:
La referencia a @wire(MessageContext)
garantiza que se ejecute unsubscribe
durante el ciclo de vida de eliminación del componente.
- Guarde el archivo.
- Abra counts.html y agregue este código entre las etiquetas
template
: - Guarde el archivo.
- Actualice counts.js-meta.xml para que el componente counts esté disponible en las páginas de la aplicación Lightning:
- Guarde el archivo.
Agregar los nuevos componentes a la aplicación de comunicaciones de eventos
- Implemente la carpeta lwc y, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
- Abra la página Event Comms (Comunicaciones de eventos) para realizar modificaciones.
- Arrastre el componente remoteControl hasta la región derecha de la página.
- Arrastre el componente counts hasta la región derecha, justo debajo del componente remoteControl.
- Haga clic en Save (Guardar) y, luego, salga del Generador de aplicaciones Lightning.
Verificar comunicaciones
- Haga clic en los botones de Remote Control (Control remoto) para cambiar el recuento del componente counts.
También puede utilizar el Servicio de mensajería Lightning para comunicarse con componentes de Aura y páginas de Visualforce. Es la forma más prolija de mantener sincronizados distintos tipos de componentes.
Ahora, ya cuenta con conocimientos prácticos adecuados sobre cómo comunicarse entre componentes web Lightning. Trabajó en escenarios de elemento secundario a principal, elemento principal a secundario y componentes no relacionados. Asegúrese de consultar los recursos para seguir aprendiendo sobre la comunicación con componentes web Lightning.
Recursos
- Guía para desarrolladores de componentes web Lightning: Comunicarse en el DOM
- Guía para desarrolladores de componentes web Lightning: Configurar la propagación de eventos
- Guía para desarrolladores de componentes web Lightning: Mejores prácticas de eventos
- Guía para desarrolladores de componentes web Lightning: Servicio de mensajería Lightning
- Referencia de los componentes web Lightning: Servicio de mensajería
- GitHub: Recetas de LWC: lmsPublisherWebComponent
- GitHub: Recetas de LWC: lmsSubscriberWebComponent
- Blog para desarrolladores de Salesforce: Servicio de mensajería Lightning (Vista previa para desarrolladores)
- Blog para desarrolladores de Salesforce: Mejorar sus habilidades de LWC
- Blog para desarrolladores de Salesforce: Patrones de comunicación entre componentes para componentes web Lightning