Communication parent-enfant

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 faire communiquer un composant parent avec un composant enfant, l’enfant expose une propriété ou une fonction pour la rendre publique. Le parent peut ensuite mettre à jour la propriété publique de l’enfant ou appeler la fonction publique de l’enfant.

Schéma représentant la communication parent-enfant depuis le composant « augmentor » (augmentateur) vers le composant « numerator » (numérateur).

De plus, si vous souhaitez ajouter des fonctionnalités, mettez à jour la propriété publique avec un getter et un setter sur le composant enfant.

Commençons par une simple mise à jour de la propriété publique. Une autre unité commerciale a trouvé le numérateur que vous avez créé. Elle veut l’utiliser et l’enrichir. Sa première demande est de pouvoir définir le chiffre de départ du compteur. Nous ne devons apporter aucune modification qui aurait une incidence sur le cas d’utilisation métier d’origine. Nous allons donc envelopper le composant « numerator » (numérateur) dans un autre composant, qui contiendra la nouvelle fonctionnalité.

Mise à jour d’une propriété publique

Le décorateur @api du composant enfant expose une propriété, qui devient publique, afin que le composant parent puisse la mettre à jour.

Exposez une propriété publique dans le composant enfant (numerator [numérateur]) :

Dans Visual Studio Code, ouvrez le fichier numerator.js et appliquez le décorateur @api à la propriété counter :
```
  @api counter = 0;
```
Importez le décorateur API à partir du module lwc.
Enregistrez le fichier.

Créez et codez un nouveau composant parent nommé augmentor (augmentateur) :

Créez un composant Web Lightning et nommez-le augmentor (augmentateur).

Dans le fichier augmentor.js, collez le code ci-dessous dans la classe Augmentor :

  startCounter = 0;
  handleStartChange(event) {
    this.startCounter = parseInt(event.target.value);
  }

Enregistrez le fichier.

Ouvrez le fichier augmentor.html et ajoutez le code ci-dessous entre les balises template :

  <lightning-card title="Augmentor" icon-name="action:download">
    <lightning-layout>
      <lightning-layout-item flexibility="auto" padding="around-small">
        <lightning-input
          label="Set Starting Counter"
          type="number"
          min="0"
          max="1000000"
          value={startCounter}
          onchange={handleStartChange}>
        </lightning-input>
      </lightning-layout-item>
    </lightning-layout>
    <c-numerator
      class="slds-show slds-is-relative"
      counter={startCounter}>
    </c-numerator>
  </lightning-card>

Enregistrez le fichier.
Mettez à jour le fichier augmentor.js-meta.xml afin que le composant « augmentor » (augmentateur) soit disponible sur les pages de l’application Lightning :
```
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__AppPage</target>
    </targets>
```
Enregistrez le fichier.

Ajoutez le nouveau composant (augmentor [augmentateur]) à la page de l’application Event Comms (Communications d’événements) :

Déployez le dossier lwc, puis actualisez la page de l’application Event Comms (Communications d’événements).
Ouvrez la page de l’application Event Comms (Communications d’événements) pour apporter des modifications.
Faites glisser le composant augmentor (augmentateur) vers la zone centrale de la page.
Cliquez sur Save (Enregistrer), puis quittez l’outil Lightning App Builder (Générateur d’application Lightning).

Vérifiez les communications :

Pour afficher les modifications dans Salesforce, actualisez la page de l’application Event Comms (Communications d’événements).
Saisissez un nombre dans le champ Set Starting Counter (Définir le compteur de départ).
Le nombre est mis à jour en fonction de votre saisie.
Cliquez sur l’un des boutons de multiplication.
Notez que le compteur est mis à jour, mais que le champ Set Starting Counter (Définir le compteur de départ) n’est pas modifié.
Modifiez les valeurs du composant « numerator » (numérateur) d’origine.
Il continue de fonctionner comme prévu.

Le composant parent (augmentor [augmentateur]) envoie des informations (startCounter) à la propriété « counter » du composant enfant (numerator [numérateur]).

Comme nous avons octroyé au champ Set Starting Counter (Définir le compteur de départ) son propre composant (augmentor [augmentateur]) au lieu de l’ajouter au composant « numerator » (numérateur), le numérateur continue de répondre au cas d’utilisation métier d’origine. Désormais, le numérateur reçoit les entrées de son composant enfant (controls [contrôles]) et de son composant parent (augmentor [augmentateur]).

Appel d’une fonction publique

La deuxième demande de l’entreprise est d’augmenter le nombre d’un million. Le champ Set Starting Count (Définir le compteur de départ) ne doit pas être modifié. Autrement dit, nous ne pouvons pas simplement mettre à jour la propriété startCounter. De plus, nous ne connaissons pas le nombre actuel du composant « augmentor » (augmentateur) auquel effectuer l’ajout. Nous allons appeler une fonction publique sur le composant enfant pour qu’elle réalise la mise à jour à notre place.

Le décorateur @api du composant enfant expose une fonction, qui devient publique, afin que le composant parent puisse l’appeler.

Créez une fonction publique dans le composant enfant (numerator [numérateur]) :

Ouvrez le fichier numerator.js et ajoutez la fonction maximizeCounter après la fonction handleMultiply :
```
  @api
  maximizeCounter() {
    this.counter += 1000000;
  }
```
Enregistrez le fichier.

Dans le composant parent (augmentor [augmentateur]), ajoutez un bouton et son gestionnaire :

Ouvrez le fichier augmentor.js et ajoutez la fonction handleMaximizeCounter après la fonction handleStartChange :
```
  handleMaximizeCounter() {
    this.template.querySelector('c-numerator').maximizeCounter();
  }
```
Cette fonction recherche la balise c-numerator dans le fichier augmentor.html et appelle la fonction publique maximizeCounter.
Enregistrez le fichier.

Ouvrez le fichier augmentor.html et ajoutez lightning-button après l’élément lightning-input du champ Set Starting Counter (Définir le compteur de départ).

        <lightning-button
          class="slds-var-p-vertical_xx-small"
          label="Add 1m To Counter"
          onclick={handleMaximizeCounter}>
        </lightning-button>

Enregistrez le fichier.

Vérifiez les communications :

Pour voir les modifications dans Salesforce, déployez le dossier lwc et actualisez la page de l’application Event Comms (Communications d’événements).
Cliquez sur Add 1m To Counter (Ajouter 1 million au compteur).
Le nombre est augmenté d’un million.

Dans le composant parent (augmentor [augmentateur]), le nouveau bouton déclenche le gestionnaire handleMaximizeCounter, qui appelle le composant enfant (numerator [numérateur]) et déclenche sa fonction publique maximizeCounter.

Schéma correspondant à la description précédente.

Utilisation d’un getter et d’un setter publics

Cet exercice ressemble beaucoup à celui réalisé au début de cette étape pour mettre à jour une propriété. En fait, le composant parent ne sera pas du tout modifié. Nous allons simplement implémenter la propriété publique « counter » avec un getter et un setter publics dans le composant enfant.

Les deux unités commerciales utilisant Event Comms (Communications d’événements) raffolent des mises à jour. Elles aimeraient que la valeur précédente du nombre s’affiche lorsque le nombre change. Nous avons besoin d’un moyen de capturer le nombre actuel à chaque modification de la propriété « counter ». Nous pouvons connaître le nombre actuel et l’enregistrer avant de définir la nouvelle valeur. Nous allons utiliser une nouvelle variable privée nommée _currentCount à cette fin. Pour conserver le nombre précédent afin de pouvoir l’afficher, nous allons utiliser une variable nommée priorCount.

Pour la fonctionnalité supplémentaire, nous implémentons la propriété counter en tant que getter et setter (get et set, ou propriété d’accesseur). Ensuite, à chaque définition du compteur, nous stockons sa valeur actuelle (_currentCount) dans la variable priorCount avant de définir sa nouvelle valeur.

Ajoutez un nombre précédent au composant enfant (numerator [numérateur]) :

Ouvrez le fichier numerator.html et ajoutez le paragraphe ci-dessous juste avant le paragraphe avec le nombre :

      <p class="slds-text-align_center slds-var-m-vertical_medium">
        Prior Count: <lightning-formatted-number value={priorCount}></lightning-formatted-number>
      </p>

Enregistrez le fichier.
Ouvrez le fichier numerator.js et convertissez @api counter = 0; en commentaire (en ajoutant // au début de la ligne).
Après le commentaire, ajoutez le code suivant :
```
  _currentCount = 0;
  priorCount = 0;
  @api
  get counter() {
    return this._currentCount;
  }
  set counter(value) {
    this.priorCount = this._currentCount;
    this._currentCount = value;
  }
```
Ce code convertit counter en une propriété avec des fonctions getter (get) et setter (set). Il ajoute également les propriétés priorCount et _currentCount.
Enregistrez le fichier.

Vérifiez les communications :

Pour voir les modifications dans Salesforce, déployez le dossier lwc et actualisez la page de l’application Event Comms (Communications d’événements).
Cliquez sur Add (Ajouter), X 2 et Add 1m To Counter (Ajouter 1 million au compteur) pour modifier la valeur du compteur.
Le compteur précédent est toujours synchronisé lorsque vous mettez à jour le compteur.
Cliquez sur les boutons des composants « numerator » (numérateur) et « augmentor » (augmentateur) pour constater que la fonctionnalité d’origine n’est pas impactée.

Nous avons mis à jour le composant « numerator » (numérateur) afin de mettre à jour la nouvelle propriété priorCount à l’aide d’un getter et d’un setter. Le composant parent (augmentor [augmentateur]) envoie toujours des informations (startCounter) au composant enfant (numerator [numérateur]). Mais maintenant, le numérateur utilise un getter et un setter pour get (obtenir) la propriété _currentCount et set (définir) les propriétés _currentCount et priorCount.

Schéma correspondant à la description précédente.

Mettez-vous au défi (facultatif : nous ne vérifierons pas ce code)

Mettez à jour handleMaximizeCounter et maximizeCounter pour accepter un argument qui indique le nombre à ajouter. Indice : passez en revue les instructions de l’étape 1 permettant d’envoyer un élément data-factor avec l’événement personnalisé multiply.

Résumé

Vous avez vu la communication enfant-parent et parent-enfant entre les composants Web Lightning. Lors de l’étape suivante, vous utiliserez le service de messagerie Lightning pour permettre à des composants qui n’ont pas de relation parent-enfant de communiquer entre eux.

Besoin d'aide ?

En savoir plus

Communication parent-enfant

Remarque

Mise à jour d’une propriété publique

Appel d’une fonction publique

Utilisation d’un getter et d’un setter publics

Résumé

Ressources