Skip to main content
Únase a nosotros en TDX, San Francisco o en Salesforce+ del 5 al 6 de marzo en la conferencia de desarrolladores para la era del agente de la IA. Regístrese ahora.

Comunicarse entre componentes no relacionados

Nota

Nota

¿Es su idioma de aprendizaje español (LATAM)? Comience el reto en un Trailhead Playground en español (LATAM) y utilice las traducciones entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto dependen de los datos en ese idioma. Si no aprueba el reto en su organización en español (LATAM), recomendamos que (1) cambie la configuración local a Estados Unidos, (2) cambie el idioma a inglés (según estas instrucciones) y, luego, (3) haga clic en el botón “Check Challenge” (Comprobar el reto) nuevamente.

Consulte la insignia Trailhead en su idioma para obtener más información sobre cómo aprovechar la experiencia de Trailhead en otros idiomas.

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.

Diagrama de comunicación de LMS en el que se muestra un objeto de documento que contiene varios elementos, incluido un elemento dentro de uno principal. Los canales de LMS se representan mediante flechas unidireccionales y bidireccionales entre elementos.

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.

Un componente llamado remoteControl envía información a un componente no relacionado llamado counts.

Crear un canal de mensajes Lightning

  1. En Visual Studio Code, en la carpeta default, cree una carpeta llamada messageChannels.
  2. En la carpeta messageChannels, cree un archivo llamado Count_Updated.messageChannel-meta.xml.
  3. En Count_Updated.messageChannel-meta.xml, pegue el siguiente código:
    <?xml version="1.0" encoding="UTF-8" ?>
    <LightningMessageChannel xmlns="http://soap.sforce.com/2006/04/metadata">
        <masterLabel>CountUpdated</masterLabel>
        <isExposed>true</isExposed>
        <description>Message Channel to pass Count updates</description>
         <lightningMessageFields>
            <fieldName>operator</fieldName>
            <description>This is the operator type of the manipulation</description>
        </lightningMessageFields>
        <lightningMessageFields>
             <fieldName>constant</fieldName>
            <description>This is the number for the manipulation</description>
         </lightningMessageFields>
    </LightningMessageChannel>
Nota

Si recibe un error de validación de XML, es posible que deba realizar estos pasos para desactivar la validación de XML.

    • En VS Code, haga clic en File (Archivo) > Preferences (Preferencias) > Settings (Configuración) para Windows o Code (Código) > Settings (Configuración) > Settings (Configuración) para macOS.
    • Busque Validation (Validación).
    • Seleccione XML y desmarque Validation (Validación).
  1. Guarde e implemente el archivo.

Crear el componente de editor

  1. Cree un componente web Lightning denominado remoteControl.
  2. Sustituya el contenido de remoteControl.js por el siguiente código:
    import { LightningElement, wire } from 'lwc';
    import { publish, MessageContext } from 'lightning/messageService';
    import COUNT_UPDATED_CHANNEL from '@salesforce/messageChannel/Count_Updated__c';
    export default class RemoteControl extends LightningElement {
      @wire(MessageContext)
      messageContext;
      handleIncrement() {
        // this.counter++;
        const payload = {
          operator: 'add',
          constant: 1
        };
        publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
      }
      handleDecrement() {
        // this.counter--;
        const payload = {
          operator: 'subtract',
          constant: 1
        };
        publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
      }
      handleMultiply(event) {
        const factor = event.detail;
         // this.counter *= factor;
        const payload = {
          operator: 'multiply',
          constant: factor
        };
        publish(this.messageContext, COUNT_UPDATED_CHANNEL, payload);
      }
    }
    Importamos publish y MessageContext 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ón publish.
  3. Guarde el archivo.
  4. Abra el archivo remoteControl.html y agregue este código entre las etiquetas template:
      <lightning-card title="Remote Control" icon-name="action:change_record_type">
        <c-controls
          class="slds-show slds-is-relative"
          onadd={handleIncrement}
          onsubtract={handleDecrement}
          onmultiply={handleMultiply}>
        </c-controls>
      </lightning-card>
    Tenga en cuenta que utilizamos el componente controls.
  5. Guarde el archivo.
  6. Actualice remoteControl.js-meta.xml para que el componente remoteControl esté disponible en las páginas de la aplicación Lightning:
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__AppPage</target>
        </targets>
  7. Guarde el archivo.

Crear el componente de suscriptor

  1. Cree un componente web Lightning denominado counts.
  2. Sustituya el contenido de counts.js por el siguiente código:
    import { LightningElement, wire } from 'lwc';
    import { subscribe, MessageContext } from 'lightning/messageService';
    import COUNT_UPDATED_CHANNEL from '@salesforce/messageChannel/Count_Updated__c';
    export default class Counts extends LightningElement {
      subscription = null;
      priorCount = 0;
      counter = 0;
      @wire(MessageContext)
      messageContext;
      subscribeToMessageChannel() {
        this.subscription = subscribe(
          this.messageContext,
          COUNT_UPDATED_CHANNEL,
          (message) => this.handleMessage(message)
        );
      }
      handleMessage(message) {
        this.priorCount = this.counter;
        if(message.operator == 'add') {
          this.counter += message.constant;
        }else if(message.operator == 'subtract') {
          this.counter -= message.constant;
        } else {
          this.counter *= message.constant;
        }
      }
      connectedCallback() {
        this.subscribeToMessageChannel();
      }
    }

La referencia a @wire(MessageContext) garantiza que se ejecute unsubscribe durante el ciclo de vida de eliminación del componente.

  1. Guarde el archivo.
  2. Abra counts.html y agregue este código entre las etiquetas template:
      <lightning-card title="Counts" icon-name="action:change_record_type">
        <p class="slds-text-align_center slds-var-m-vertical_medium">
          Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
        </p>
        <p class="slds-text-align_center slds-var-m-vertical_medium">
          Count: <lightning-formatted-number value={counter}></lightning-formatted-number>
        </p>
      </lightning-card>
  3. Guarde el archivo.
  4. Actualice counts.js-meta.xml para que el componente counts esté disponible en las páginas de la aplicación Lightning:
        <isExposed>true</isExposed>
        <targets>
            <target>lightning__AppPage</target>
        </targets>
  5. Guarde el archivo.

Agregar los nuevos componentes a la aplicación de comunicaciones de eventos

  1. Implemente la carpeta lwc y, luego, actualice la página de la aplicación Event Comms (Comunicaciones de eventos).
  2. Abra la página Event Comms (Comunicaciones de eventos) para realizar modificaciones.
  3. Arrastre el componente remoteControl hasta la región derecha de la página.
  4. Arrastre el componente counts hasta la región derecha, justo debajo del componente remoteControl.
  5. Haga clic en Save (Guardar) y, luego, salga del Generador de aplicaciones Lightning.

Verificar comunicaciones

  1. 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

Verificar paso

+100 puntos

Completará esta/este proyecto en su propia organización de prácticas. Haga clic en Iniciar para empezar a trabajar, o haga clic en el nombre de su organización para seleccionar una diferente.

Comparta sus comentarios de Trailhead en la Ayuda de Salesforce.

Nos encantaría saber más sobre su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios en cualquier momento en el sitio de Ayuda de Salesforce.

Más información Continuar a Compartir comentarios