Skip to main content

Comunicación entre componentes no relacionados

Nota

Nota

¿Su idioma de aprendizaje es español? Comience el reto en un Trailhead Playground en español y utilice las traducciones proporcionadas entre paréntesis para navegar. Copie y pegue solo los valores en inglés, ya que las validaciones del reto se basan en los datos en inglés. Si no aprueba el reto en su organización en español, le recomendamos que (1) cambie la configuración regional a Estados Unidos, (2) cambie el idioma a inglés, siga las instrucciones descritas aquí y, a continuación, (3) vuelva a hacer clic en el botón Check Challenge (Comprobar el reto).

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 la comunicación entre los árboles secundarios del DOM (y en algunos casos entre distintas ventanas de un navegador donde se ha iniciado sesión en la misma organización), puede usar Lightning Message Service (LMS). LSM 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.  

Puede usar LMS para la comunicación entre componentes no relacionados a menos que controle tanto los componentes como el componente principal común. LMS es una herramienta potente, eficaz y fácil de usar, pero no deje que eso le ciegue para usarla cuando no es realmente necesaria. Es mucho más eficiente activar eventos DOM. Si necesita comunicarse entre componentes con un elemento principal que no está bajo su control, como ranuras de App Builder, Lightning Message Service es la opción perfecta.

Diagrama de comunicación de LMS donde vemos objeto de documento que contiene distintos elementos, incluido un elemento dentro de otro elemento principal. Los canales de LMS se representan mediante flechas unidireccionales y bidireccionales entre los elementos.

Una tercera unidad de negocio quiere unirse al proyecto de manipulación de cifras. Necesitan reunir Prior Count (Recuento anterior) y Count (Recuento) en su propio componente para mostrar esos datos donde los necesiten. Vamos a empezar por crear el canal de mensajería para que esté listo para los componentes.

Un componente con el nombre remoteControl envía información a un componente no relacionado con el nombre "counts" (recuentos).

Crear un canal de mensajería de Lightning

  1. En Visual Studio Code, en la carpeta default, cree una carpeta con el nombre messageChannels.
  2. En la carpeta messageChannels, cree un archivo con el nombre Count_Updated.messageChannel-meta.xml.
  3. En Count_Updated.messageChannel-meta.xml, pegue este 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 se produce un error de validación para el archivo XML, es posible que tenga que seguir estos pasos para desactivar la validación del XML.

    • En Visual Studio Code, haga clic en File (Archivo) > Preferences (Preferencias) > Settings (Configuración) (Windows), o bien Code > Settings (Configuración) > Settings (Configuración) (macOS).
    • Busque Validation (Validación).
    • Seleccione XML y anule la selección de Validation (Validación).
  1. Guarde e implemente el archivo.

Crear el componente de publicación

  1. Cree un componente web Lightning con el nombre 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 desde Lightning Message Service. También importamos el canal que acabamos de crear (Count_Updated__c). La carga útil de los datos se envía junto con la función publish.
  3. Guarde el archivo.
  4. Abra 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>
    Observe que estamos usando componentes de controles.
  5. Guarde el archivo.
  6. Actualice el archivo 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 suscripción

  1. Cree un componente web Lightning con el nombre 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();
  }
}

Con la referencia a @wire(MessageContext), nos aseguramos de que se ejecute unsubscribe durante el ciclo de vida de destrucció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 el archivo 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 Event Comms

  1. Implemente la carpeta lwc y actualice la página de la aplicación Event Comms.
  2. Abra la página Event Comms para editarla.
  3. Arrastre el componente remoteControl a la parte derecha de la página.
  4. Arrastre el componente counts a la parte derecha de la página, junto debajo de remoteControl.
  5. Haga clic en Save (Guardar) y salga de Lightning App Builder.

Verificar las comunicaciones

  1. Haga clic en los botones de Remote Control (Control remoto) para cambiar el recuento del componente "counts".

Puede usar Lightning Message Service para comunicarse también con componentes de Aura y páginas de Visualforce. Es la manera más organizada de sincronizar distintos tipos de componentes. 

Ahora tiene bastantes conocimientos sobre cómo funciona la comunicación entre componentes web Lightning. Ha trabajado con casos de componentes no relacionados, de componente secundario a principal y de componente principal a secundario. No olvide consultar los recursos para obtener más información sobre la comunicación entre componentes web Lightning.

Recursos

Comparta sus comentarios sobre Trailhead en la Ayuda de Salesforce.

Nos encantaría conocer su experiencia con Trailhead. Ahora puede acceder al nuevo formulario de comentarios cuando quiera desde el sitio de la Ayuda de Salesforce.

Más información Continuar para compartir comentarios