Fazer a comunicação entre componentes sem relação

Nota

Deseja aprender em português (Brasil)? Comece o desafio em um Trailhead Playground de português (Brasil) e use as traduções fornecidas entre parênteses para navegar. Copie e cole somente os valores em inglês porque as validações dos desafios dependem de dados em inglês. Se você não passar no desafio em sua organização de português (Brasil), recomendamos que (1) mude o local para os Estados Unidos, (2) mude o idioma para inglês, seguindo as instruções aqui, e (3) clique novamente no botão “Validar o desafio”.

Consulte o emblema Trailhead no seu idioma para saber mais sobre como aproveitar a experiência de Trailhead em outros idiomas.

Para se comunicar entre as subárvores no DOM (e em alguns casos entre janelas de navegador diferentes conectadas à mesma organização), use o Lightning Message Service (LMS). O LMS é um serviço de publicação e assinatura que facilita as comunicações entre componentes Web do Lightning, componentes do Aura e páginas do Visualforce.

Use o LMS para comunicação entre componentes sem relação quando você não controlar os dois componentes e um pai em comum. O LMS é potente, eficaz e fácil de usar, mas não caia na tentação de usá-lo quando ele não é necessário. O acionamento de eventos de DOM é muito mais eficiente. Quando você precisa se comunicar entre componentes com um pai que não está sob seu controle, por exemplo, dois slots do Criador de aplicativos, o Lightning Message Service é a escolha perfeita.

Diagrama de comunicação do LMS mostrando um objeto de documento que contém vários elementos, inclusive um com um elemento pai. Os canais de LMS estão representados por setas unidirecionais e bidirecionais entre elementos.

Uma terceira unidade de negócios quer participar do projeto de manipulação de números. Ela precisa que Prior Count (Contador anterior) e Count (Contador) estejam juntos em seu próprio componente para poder exibi-los sempre que precisar. Vamos começar criando o canal de mensagens para que fique pronto para uso pelos componentes.

Um componente chamado remoteControl envia informações a um componente não relacionado chamado counts.

Criar um canal de mensagens do Lightning

No Visual Studio Code, na pasta default (padrão), crie uma pasta chamada messageChannels.
Na pasta messageChannels, crie um arquivo chamado Count_Updated.messageChannel-meta.xml.

Em Count_Updated.messageChannel-meta.xml, cole 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>

Se você está recebendo um erro de validação no XML, talvez precise percorrer estas etapas para desativar a validação de XML.

No VS Code, clique em File (Arquivo) > Preferences (Preferências) > Settings (Configurações) (Windows) ou Code (Código) > Settings (Configurações) > Settings (Configurações) (macOS).
Pesquise Validation (Validação).
Selecione XML e desmarque Validation (Validação).

Salve e implante o arquivo.

Criar o componente Publisher

Crie um componente Web do Lightning chamado remoteControl.

Substitua o conteúdo de remoteControl.js por este 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 e MessageContext do Lightning Message Service. Também importamos o canal que acabamos de criar (Count_Updated__c). O payload de dados é enviado com a função publish.

Salve o arquivo.

Abra remoteControl.html e adicione este código entre as tags 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 reutilizando o componente controls.

Salve o arquivo.
Atualize remoteControl.js-meta.xml para disponibilizar o componente remoteControl nas páginas de aplicativo do Lightning:
```
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
```
Salve o arquivo.

Criar o componente Subscriber

Crie um componente Web do Lightning chamado counts.

Substitua o conteúdo de counts.js por este 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();
  }
}

A referência a @wire(MessageContext) faz com que unsubscribe seja executado durante o ciclo de vida de destruição do componente.

Salve o arquivo.

Abra counts.html e adicione este código entre as tags 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>

Salve o arquivo.

Atualize counts.js-meta.xml para disponibilizar o componente counts nas páginas de aplicativo do Lightning:

    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>

Salve o arquivo.

Adicionar os novos componentes ao aplicativo Event Comms

Implante a pasta lwc e atualize a página do aplicativo Event Comms.
Abra a página Event Comms (Comunicações de evento) para edição.
Arraste o componente remoteControl até a região direita da página.
Arraste o componente counts até a região direita, logo abaixo do componente remoteControl.
Clique em Save (Salvar) e saia do Criador de aplicativo Lightning.

Verificar comunicações

Clique nos botões no Controle Remoto para mudar a contagem no componente counts.

Você pode usar o Lightning Message Service para se comunicar também com componentes do Aura e páginas do Visualforce. É a maneira mais limpa de manter vários tipos de componente em sincronia.

Agora você tem um bom conhecimento de como fazer a comunicação entre componentes Web do Lightning. Você trabalhou em cenários de filho para pai, pai para filho e componentes sem relação. Confira os recursos para saber mais sobre como se comunicar com componentes Web do Lightning.

Procurando ajuda?

Descubra mais