Skip to main content
Join the Agentforce Hackathon on Nov. 18-19 to compete for a $20,000 Grand Prize. Sign up now. Terms apply.

Communication entre des composants non liés

Remarque

Remarque

Vous souhaitez apprendre en français ? Commencez le défi dans un Trailhead Playground en français et utilisez les traductions fournies entre crochets pour naviguer. Copiez et collez uniquement les valeurs en anglais, car les validations de défi reposent sur les données en anglais. Si vous ne réussissez pas le défi dans votre organisation en français, nous vous recommandons (1) de définir le paramètre régional sur les États-Unis, (2) de définir la langue sur l’anglais en suivant les instructions ici, puis (3) de cliquer à nouveau sur le bouton « Vérifier le défi ».

Consultez le badge Trailhead dans votre langue pour découvrir comment profiter de l’expérience Trailhead traduite.

Pour communiquer entre les sous-arborescences dans DOM (et dans certaines circonstances entre différentes fenêtres de navigateur connectées à la même organisation), utilisez le service de messagerie Lightning (LMS). Il s’agit d’un service de publication et d’abonnement qui facilite la communication entre les composants Web Lightning, les composants Aura et les pages Visualforce.  

Il permet la communication entre des composants non liés, sauf si vous contrôlez les deux composants et un parent commun. LMS est performant, efficace et facile à utiliser. Néanmoins, il est conseillé de ne pas l’utiliser lorsque cela n’est pas nécessaire. Le déclenchement d’événements DOM est beaucoup plus efficace. Lorsque des composants doivent communiquer avec un parent que vous ne pouvez pas contrôler, comme deux emplacements App Builder (Générateur d’application), le service de messagerie Lightning est le choix idéal.

Schéma représentant la communication LMS avec un objet de document contenant plusieurs éléments, dont un élément au sein d’un élément parent. Les canaux LMS sont représentés par des flèches unidirectionnelles et bidirectionnelles entre les éléments.

Une troisième unité commerciale doit participer au projet de manipulation des nombres. Elle a besoin que la valeur actuelle et la valeur précédente du nombre soient réunies dans son composant afin de pouvoir les afficher partout où cela est nécessaire. Commençons par créer le canal de messages afin qu’il soit prêt à être utilisé par les composants.

Un composant nommé « remoteControl » (contrôleDistant) envoie des informations à un composant non lié nommé « counts » (nombres).

Création d’un canal de messages Lightning

  1. Dans Visual Studio Code, dans le dossier default (défaut), créez un dossier et nommez-le messageChannels (canauxMessages).
  2. Dans le dossier messageChannels (canauxMessages), créez un fichier et nommez-le Count_Updated.messageChannel-meta.xml (Nombre_CanalMessages.Màj-meta.xml).
  3. Collez le code ci-dessous dans le fichier Count_Updated.messageChannel-meta.xml :
    <?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>
Remarque

Si vous obtenez une erreur de validation pour le fichier XML, vous devrez peut-être suivre les étapes ci-après pour désactiver la validation XML.

    • Dans VS Code, cliquez sur File (Fichier) > Preferences (Préférences) > Settings (Paramètres) (Windows) ou sur Code > Settings (Paramètres) > Settings (Paramètres) (macOS).
    • Recherchez Validation.
    • Sélectionnez XML et désélectionnez Validation.
  1. Enregistrez et déployez le fichier.

Création du composant d’éditeur

  1. Créez un composant Web Lightning et nommez-le remoteControl (contrôleDistant).
  2. Remplacez le contenu de remoteControl.js par ce code.
    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);
  }
}
    Nous importons les éléments publish et MessageContext à partir du service de messagerie Lightning. Nous importons également le canal que nous venons de créer (Count_Updated__c). La charge de travail des données est envoyée avec la fonction publish (publier).
  3. Enregistrez le fichier.
  4. Ouvrez le fichier remoteControl.html et ajoutez le code ci-dessous entre les balises 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>
    Notez que nous réutilisons le composant de contrôle.
  5. Enregistrez le fichier.
  6. Mettez à jour le fichier remoteControl.js-meta.xml afin que le composant « remoteControl » (contrôleDistant) soit disponible sur les pages de l’application Lightning :
        <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
  7. Enregistrez le fichier.

Création du composant d’abonné

  1. Créez un composant Web Lightning et nommez-le counts (nombres).
  2. Remplacez le contenu de counts.js par ce code.
    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 référence à @wire(MessageContext) permet de s’assurer que l’élément unsubscribe (se désabonner) est exécuté pendant le cycle de vie de destruction d’un composant.

  1. Enregistrez le fichier.
  2. Ouvrez le fichier counts.html et ajoutez le code ci-dessous entre les balises 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. Enregistrez le fichier.
  4. Mettez à jour le fichier counts.js-meta.xml afin que le composant « counts » (nombres) soit disponible sur les pages de l’application Lightning :
        <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
    </targets>
  5. Enregistrez le fichier.

Ajout de nouveaux composants à l’application Event Comms (Communications d’événements)

  1. Déployez le dossier lwc, puis actualisez la page de l’application Event Comms (Communications d’événements).
  2. Ouvrez la page Event Comms (Communications d’événements) pour apporter des modifications.
  3. Faites glisser le composant remoteControl (contrôleDistant) vers la zone de droite de la page.
  4. Faites glisser le composant counts (nombres) vers la zone de droite, juste sous le composant « remoteControl » (contrôleDistant).
  5. Cliquez sur Save (Enregistrer), puis quittez l’outil Lightning App Builder (Générateur d’application Lightning).

Vérification des communications

  1. Cliquez sur les boutons du contrôle distant pour modifier le nombre dans le composant « counts » (nombres).

Vous pouvez également utiliser le service de messages Lightning pour communiquer avec les composants Aura et les pages Visualforce. C’est le meilleur moyen d’assurer la synchronisation de différents types de composants. 

Vous disposez désormais d’une bonne connaissance pratique de la communication entre les composants Web Lightning. Vous avez travaillé sur des scénarios avec des composants enfant-parent, parent-enfant et non liés. N’oubliez pas de consulter les ressources pour en savoir plus sur la communication avec les composants Web Lightning.

Ressources

Partagez vos commentaires sur Trailhead dans l'aide Salesforce.

Nous aimerions connaître votre expérience avec Trailhead. Vous pouvez désormais accéder au nouveau formulaire de commentaires à tout moment depuis le site d'aide Salesforce.

En savoir plus Continuer à partager vos commentaires