Skip to main content
ƚnase a nosotros en TDX, en San Francisco, o en Salesforce+ los dƭas 5 y 6 de marzo en la conferencia para desarrolladores sobre la era de agentes de IA. Registrarse ahora.

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

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 otro diferente.

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