Les événements dans LWC sont utilisés pour communiquer avec les composants. S'il existe des composants associés, il peut être possible de communiquer de parent à enfant ou d'enfant à parent. S'il existe deux composants non liés, nous pouvons communiquer via le modèle PubSub (Publish-Subscribe) ou avec le Lightning Message Service (LMS). Dans ce guide, nous verrons comment communiquer avec des événements de parent à enfant, d'enfant à parent et des composants interdépendants à l'aide du modèle PubSub.
Vous pouvez placer les composants dans votre page d'enregistrement, votre page d'application ou votre page d'accueil. Nous ne spécifierons plus ce fichier (méta-xml) dans les exemples d'extraits de code :
version XML = '1,0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< VersionAPI > 57,0 VersionAPI >
< est exposée > vrai est exposée >
< cibles >
< cible > foudre__RecordPage cible >
< cible > Lightning__AppPage cible >
< cible > foudre__Page d'accueil cible >
cibles >
LightningComponentBundle >
Communication parent-enfant
Si deux composants sont liés l'un à l'autre, cette communication est possible. Ici, le Parent envoie les données à l'Enfant. Le composant parent contient le composant Enfant. Avec cette approche, nous pouvons transmettre les données primitives (entier, chaîne, booléen, etc.) du parent à l'enfant, transmettre les données non primitives (tableau, objet, tableau d'objets, etc.) du parent à l'enfant, en passant les données à le composant Enfant avec l'action sur le Parent.
Afin de communiquer le parent à l'enfant, nous devons rendre les champs, les propriétés et les méthodes disponibles dans le composant Child visibles publiquement. Cela peut être possible en décorant les champs, les propriétés et les méthodes avec le décorateur « api ».
Exemple : Déclarez une variable avec « api » dans le fichier « js » du composant enfant.
@ variable API ;
Désormais, le composant Parent utilise le composant Child dans le fichier HTML via les attributs HTML.
Exemple : Utilisez la variable dans le fichier HTML parent.
< c - enfant - variable de composition > c - enfant - composition >
Discutons de quelques exemples décrivant comment communiquer entre parent et enfant.
Exemple 1:
Cet exemple de base montre l'obtention d'une information envoyée par le parent à l'enfant.
enfantComp.js
Tout d’abord, nous créons un composant Enfant qui contient la variable « information » qui est accessible au public.
// Déclarez la variable comme publique à l'aide de l'api Decorator@ informations sur l'API
Vous pouvez voir l'intégralité du code « js » dans la capture d'écran suivante :
enfantComp.html
Maintenant, nous spécifions cette variable dans le fichier HTML dans la balise center.
< modèle >< foudre - titre de la carte = 'Enfant' >
< centre >
< b > { information } b >
centre >
foudre - carte >
modèle >
parentComp.js
Nous ne faisons rien dans le fichier « js ».
parentComp.html
Placez le composant enfant précédent dans votre HTML parent en passant la variable publique (informations) avec du texte.
< modèle >< foudre - titre de la carte = 'Parent' icône - nom = 'standard : compte' >
< c - enfant - composition
information = 'Bonjour, j'ai reçu des informations...'
> c - enfant - composition >
foudre - carte >
modèle >
Sortir:
Maintenant, accédez à votre organisation Salesforce et placez le composant Parent sur la page « Enregistrer ». Vous verrez que le composant Enfant a reçu les informations du Parent.
Exemple 2 :
Créons deux champs de texte de saisie qui accepteront dynamiquement le texte de l'interface utilisateur dans le composant Parent. Si l'on insère le premier texte dans le composant Parent, le composant enfant reçoit ce texte en majuscule. De même, il reçoit le texte en minuscule si on insère le deuxième texte.
enfantComp.js
Créez deux variables – information1 et information2 – avec un décorateur de piste.
- Créez la méthode convertToUpper() avec le décorateur « api » qui convertit le premier texte saisi en majuscule.
- Créez la méthode convertToLower() avec le décorateur « api » qui convertit le deuxième texte d'entrée en minuscules.
@ Informations sur la piste2 ;
@ API
convertirEnSupérieur ( ActualInfo1 ) {
ce . Informations1 = informations réelles1. en majuscule ( ) ;
}
@ API
convertirEnInférieur ( ActualInfo1 ) {
ce . Informations2 = informations réelles1. en minuscules ( ) ;
}
L'intégralité du code « js » ressemble à ceci :
enfantComp.html
Nous affichons les valeurs (Information1 et Information2) qui proviennent du fichier « js ».
< modèle >< foudre - titre de la carte = 'Enfant' >
Haut de casse :& nbsp ; < b > { Informations1 } b >< br >
Minuscules :& nbsp ; < b > { Informations2 } b >
foudre - carte >
modèle >
parentComp.js
Nous créons deux méthodes de gestionnaire qui sélectionnent le modèle HTML enfant via querySelector(). Assurez-vous que vous devez transmettre les méthodes correctes qui convertissent le texte en majuscules ou en minuscules.
handleEvent1 ( événement ) {ce . modèle . sélecteur de requête ( 'c-childt-comp' ) . convertirEnSupérieur ( événement. cible . valeur ) ;
}
handleEvent2 ( événement ) {
ce . modèle . sélecteur de requête ( 'c-childt-comp' ) . convertirEnInférieur ( événement. cible . valeur ) ;
}
L'intégralité du code « js » ressemble à ceci :
parentComp.html
Créez un texte d'entrée avec des événements de poignée pour les deux. Placez le composant Enfant dans ce composant Parent.
< modèle >< foudre - titre de la carte = 'Parent' >
< centre >
< foudre - étiquette d'entrée = 'Entrez le texte en minuscule' sur le changement = { handleEvent1 } > foudre - saisir >
centre >
< br >< br >
< centre >
< foudre - étiquette d'entrée = 'Entrez le texte en majuscule' sur le changement = { handleEvent2 } > foudre - saisir >
centre >
< br >< br >< br >
< c - enfant - composition > c - enfant - composition >
foudre - carte >
modèle >
Sortir:
Maintenant, accédez à votre organisation Salesforce et placez le composant Parent sur la page « Enregistrer ».
Vous verrez deux entrées de texte sur l'interface utilisateur.
Écrivons du texte dans la première entrée et vous verrez que le texte est converti en majuscule et affiché dans le composant Enfant.
Écrivez du texte dans la deuxième entrée et vous verrez que le texte est converti en minuscules et affiché dans le composant Enfant.
Communication enfant-parent
Semblable à la communication précédente, pour communiquer l'Enfant au Parent, les deux composants doivent être liés l'un à l'autre. Nous pouvons communiquer l'Enfant au Parent selon trois approches différentes : appeler le Parent à l'Enfant à l'aide d'un événement simple et appeler le Parent à l'Enfant à l'aide d'un événement avec les données et l'événement bouillonnant. Nous examinerons l’événement simple dans ce guide.
Afin de communiquer l'Enfant au Parent, nous devons créer et distribuer les événements. Pour cela, un événement personnalisé doit être créé. Un événement personnalisé est un événement créé par vous-même. Nous pouvons le créer en utilisant le nouveau mot-clé. Le Event_Name peut être n'importe quoi (il peut s'agir d'une chaîne, sans majuscules ni chiffres). Pour l’instant, nous ne discuterons pas des options.
Syntaxe : new CustomEvent('Event_Name',{options…})
Maintenant, vous avez l'événement personnalisé. L'étape suivante consiste à envoyer l'événement. Pour distribuer l'événement, nous devons spécifier l'événement que nous avons créé dans la méthode EventTarget.dispatchEvent().
Syntaxe : this.displatchEvent(new CustomEvent('Event_Name',{options…})
Enfin, nous devons gérer l'événement. Maintenant, nous devons appeler le composant enfant dans votre composant Parent. Transmettez le nom de votre événement en spécifiant le préfixe « on » au nom de votre événement. Cela prend le gestionnaire d'écouteur d'événement.
Syntaxe:
< c - enfant - composant onyourEventName = { gestionnaire d'écoute } > c - enfant - composant >Exemple:
Dans cet exemple, nous créons un composant Parent (exempleParent) et deux composants Enfant.
- Dans le premier enfant (exampleChild), nous créons un texte d'entrée qui permet à l'utilisateur de fournir du texte. Le même texte est affiché dans le composant Parent en majuscule.
- Dans le deuxième enfant (child2), nous créons un texte d'entrée qui permet à l'utilisateur de fournir du texte. Le même texte est affiché dans le composant Parent en minuscules.
exempleEnfant.js
Nous créons une méthode handleChange1 qui crée le CustomEvent « linuxhintevent1 » avec le détail comme valeur cible. Après cela, nous expédions cet événement. Intégrez l'extrait suivant dans ce fichier « js ».
// gère l'événementhandleChange1 ( événement ) {
événement. prévenirDefault ( ) ;
const nom1 = événement. cible . valeur ;
const selectEvent1 = nouveau Événement personnalisé ( 'linuxhintevent1' , {
détail : nom1
} ) ;
ce . dispatchEvent ( selectEvent1 ) ;
}
exempleEnfant.html
La méthode handle précédente créée dans « js » est gérée en fonction de l’entrée Lightning dans le composant HTML.
< modèle >< foudre - titre de la carte = 'Enfant 1' >
< div classe = 'slds-m-around_medium' >
< foudre - Libellé d'entrée = 'Entrez le texte en minuscule' sur le changement = { handleChange1 } > foudre - saisir >
div >
foudre - carte >
modèle >
enfant2.js
Nous créons une méthode handleChange2 qui crée le CustomEvent « linuxhintevent2 » avec le détail comme valeur cible. Après cela, nous expédions cet événement.
handleChange2 ( événement ) {événement. prévenirDefault ( ) ;
const nom2 = événement. cible . valeur ;
const selectEvent2 = nouveau Événement personnalisé ( 'linuxhintevent2' , {
détail : nom2
} ) ;
ce . dispatchEvent ( selectEvent2 ) ;
}
enfant2.html
La méthode handle précédente créée dans « js » est gérée en fonction de l’entrée Lightning dans le composant HTML.
< modèle >< foudre - titre de la carte = 'Enfant 2' >
< div classe = 'slds-m-around_medium' >
< foudre - Libellé d'entrée = 'Entrez le texte en majuscule' sur le changement = { handleChange2 } > foudre - saisir >
div >
foudre - carte >
modèle >
exempleParent.js : Intégrez cet extrait dans votre fichier « js » à l'intérieur de la classe.
- Convertissez l'entrée en majuscules à l'aide de la fonction toUpperCase() dans handleEvent1() et stockez-la dans la variable Information1.
- Convertissez l'entrée en minuscules à l'aide de la fonction toLowerCase() dans handleEvent2() et stockez-la dans la variable Information2.
// Convertit l'entrée en majuscule à l'aide de la fonction toUpperCase()
// dans handleEvent1() et stocké dans la variable Information1
handleEvent1(événement) {
const input1 = event.detail ;
this.Information1 = input1.toUpperCase();
}
@informations sur la piste2 ;
// Convertit l'entrée en minuscules à l'aide de la fonction toLowerCase()
// dans handleEvent2() et stocké dans la variable Information2
handleEvent2(événement) {
const input2 = event.detail ;
this.Information2 = input2.toLowerCase();
}
exempleParent.html
Maintenant, affichez les deux variables (Information1 et Information2) dans le composant HTML Parent en spécifiant les deux composants Enfant.
< div classe = 'slds-m-around_medium' >
Message Enfant-1 en majuscule : < b > {Informations1} < / b >< br >
Message Enfant-2 en minuscule : < b > {Informations2} < / b >< br >
< / b >< br >
< / div >
< / carte-éclair>
< / modèle>
Sortir:
Maintenant, accédez à votre organisation Salesforce et placez le composant Parent sur la page « Enregistrer ».
Vous pouvez voir qu'il existe deux composants Enfant dans le Parent.
Tapons du texte dans le texte d'entrée sous le composant Child 1. Nous pouvons voir que notre texte est affiché en majuscule sur le composant Parent.
Donnez du texte dans le texte d'entrée sous le composant Child 2. Nous pouvons voir que notre texte est affiché en minuscule sur le composant Parent.
Il est également possible de saisir les deux textes à la fois.
Modèle PubSub
Lorsque vous travaillez avec des composants indépendants (non liés les uns aux autres) et si vous souhaitez envoyer les informations d'un composant à un autre, vous pouvez utiliser ce modèle. PubSub signifie Publier et Abonnez-vous. Le composant qui envoie les données est appelé éditeur et le composant qui reçoit les données est appelé abonné. Il est nécessaire d'utiliser le module pubsub pour envoyer les événements entre les composants. C’est déjà prédéfini et donné par Salesforce. Le nom du fichier est pubsub. Vous devez créer un composant LWC et taper ce code dans votre fichier javascript qui est « pubsub.js ».
Exemple:
Créons deux composants : Publier et Abonnez-vous.
Dans Publier, nous permettons aux utilisateurs de créer un texte de saisie. En cliquant sur le bouton, les données sont reçues en majuscules et minuscules dans le composant Subscribe.
publier.js
Intégrez ce code dans votre fichier JSON. Ici, nous obtenons les informations et publions les informations.
La variable d'information sera en majuscule et l'information1 sera en minuscule. Assurez-vous d'inclure cette instruction d'importation au début du code – importer pubsub depuis 'c/pubsub'.
informationinformations2
// Récupère les informations en majuscules et minuscules
gestionnaire d'informations ( événement ) {
ce . information = événement. cible . valeur ;
ce . informations2 = événement. cible . valeur ;
}
// Publie les deux informations (en majuscules et minuscules)
gestionnaire de publication ( ) {
pubsub. publier ( 'Publier' , ce . information )
pubsub. publier ( 'Publier' , ce . informations2 )
}
Cela devrait ressembler à :
publier.html
Tout d’abord, nous créons l’entrée Lightning pour accepter le texte avec les informations du gestionnaire. Après cela, un bouton est créé avec la fonctionnalité onclick. Ces fonctions se trouvent dans l'extrait de code « js » précédent.
< / carte-éclair>
< / modèle>
abonnez-vous.js
Intégrez ce code dans votre fichier JSON. Ici, nous abonneons d'abord les informations en les convertissant séparément en majuscules et minuscules dans la méthode callSubscriber(). Après cela, nous invoquons cette méthode via la méthodeconnectedcallback(). Assurez-vous d'inclure cette instruction d'importation au début du code – importer pubsub depuis 'c/pubsub'.
informationinformations2
// invocation de callSubscriber()
connectéRappel ( ) {
ce . appelerAbonné ( )
}
// Abonnez les informations en les convertissant en majuscules
appelerAbonné ( ) {
pubsub. s'abonner ( 'Publier' , ( information ) => {
ce . information = information. en majuscule ( ) ;
} ) ,
// Abonnez les informations en les convertissant en minuscules
pubsub. s'abonner ( 'Publier' , ( informations2 ) => {
ce . informations2 = informations2. en minuscules ( ) ;
} )
}
Ça devrait ressembler à ça:
abonnez-vous.html
Nous affichons le texte en majuscule (stocké dans information) et en minuscule (stocké dans information2).
< div classe = 'slds-p-around_medium' >
Informations reçues en majuscules - < b > {informations} < / b >< br >
Informations reçues en minuscules - < b > {informations2} < / b >
< / div >
< / carte-éclair>
< / modèle>
Sortir:
Ajoutez ces deux composants à votre page. Assurez-vous que les deux composants sont sur la même page. Sinon, la fonctionnalité ne fonctionnera pas.
Entrons du texte dans le composant « Publier » et cliquons sur le bouton « Envoyer les données ». On voit que le texte est reçu en majuscules et minuscules.
Conclusion
Nous sommes désormais en mesure de communiquer avec les composants LWC via le concept d'événement dans Salesforce LWC. Dans le cadre de ce guide, nous avons appris à communiquer du parent à l'enfant et de l'enfant au parent. Le modèle PubSub est utilisé dans le cas où vos composants ne sont pas liés les uns aux autres (pas Parent – Enfant). Chaque scénario est expliqué avec un exemple simple et assurez-vous d'inclure le code fourni au début de ce guide dans le fichier « méta-xml ».