Udalosti v LWC sa používajú na komunikáciu s komponentmi. Ak existujú súvisiace komponenty, je možné komunikovať od rodiča k dieťaťu alebo dieťaťa k rodičovi. Ak existujú dva nesúvisiace komponenty, môžeme komunikovať prostredníctvom modelu PubSub (Publish-Subscribe) alebo pomocou Lightning Message Service (LMS). V tejto príručke budeme diskutovať o tom, ako komunikovať s udalosťami od rodiča po dieťa, od dieťaťa po rodiča a vzájomne súvisiacich komponentov pomocou modelu PubSub.
Komponenty môžete umiestniť na svoju záznamovú stránku, stránku aplikácie alebo domovskú stránku. Tento súbor (meta-xml) nebudeme znova špecifikovať pod vzorovými útržkami kódu:
xml verzia = '1,0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57,0 apiVersion >
< je Exponovaný > pravda je Exponovaný >
< ciele >
< cieľ > lightning__RecordPage cieľ >
< cieľ > lightning__AppPage cieľ >
< cieľ > lightning__HomePage cieľ >
ciele >
LightningComponentBundle >
Komunikácia medzi rodičmi a deťmi
Ak sú dve zložky vo vzájomnom vzťahu, táto komunikácia je možná. Tu rodič odošle údaje dieťaťu. Nadradený komponent obsahuje komponent Child. S týmto prístupom môžeme odovzdať primitívne údaje (celé číslo, reťazec, logická hodnota atď.) od rodiča k potomkovi, odovzdať neprimitívne údaje (pole, objekt, pole objektov atď.) z rodiča podriadenému a odovzdať údaje zložka Dieťa s pôsobením na rodiča.
Aby sme mohli komunikovať rodič s dieťaťom, musíme polia, vlastnosti a metódy dostupné v komponente Child verejne zviditeľniť. Dá sa to dosiahnuť zdobením polí, vlastností a metód dekorátorom „api“.
Príklad : Deklarujte premennú s „api“ v súbore „js“ podriadeného komponentu.
@ premenná api ;
Teraz komponent Parent používa komponent Child v súbore HTML prostredníctvom atribútov HTML.
Príklad : Použite premennú v nadradenom súbore HTML.
< c - dieťa - comp premenná > c - dieťa - komp >
Poďme diskutovať o niekoľkých príkladoch, ktoré opisujú, ako komunikovať s rodičom s dieťaťom.
Príklad 1:
Tento základný príklad ukazuje získavanie informácií, ktoré rodič posiela dieťaťu.
childtComp.js
Najprv vytvoríme komponent Child, ktorý obsahuje premennú „information“, ktorá je verejne dostupná.
// Deklarujte premennú ako verejnú pomocou nástroja api Decorator@ api informácie
Celý kód „js“ si môžete pozrieť na nasledujúcej snímke obrazovky:
childtComp.html
Teraz špecifikujeme túto premennú v súbore HTML v rámci centrálnej značky.
< šablóna >< blesk - názov karty = 'dieťa' >
< stred >
< b > { informácie } b >
stred >
blesk - kartu >
šablóna >
parentComp.js
V súbore „js“ nerobíme nič.
parentComp.html
Umiestnite predchádzajúci podradený komponent do nadradeného HTML tak, že verejnú premennú (informácie) odovzdáte s nejakým textom.
< šablóna >< blesk - názov karty = 'rodič' ikonu - názov = 'standard:account' >
< c - dieťat - komp
informácie = 'Dobrý deň, dostal som informáciu...'
> c - dieťat - komp >
blesk - kartu >
šablóna >
Výkon:
Teraz prejdite do svojej organizácie Salesforce a umiestnite nadradený komponent na stránku „Záznam“. Uvidíte, že komponent Child dostal informácie od rodiča.
Príklad 2:
Vytvorme dve vstupné textové polia, ktoré budú dynamicky prijímať text z používateľského rozhrania v nadradenom komponente. Ak prvý text vložíme do nadradeného komponentu, podriadený komponent dostane tento text veľkými písmenami. Podobne prijíma text s malými písmenami, ak vložíme druhý text.
childtComp.js
Vytvorte dve premenné – informácie1 a informácie2 – pomocou dekorátora koľají.
- Vytvorte metódu convertToUpper() s dekorátorom „api“, ktorý skonvertuje prvý vstupný text na veľké písmená.
- Vytvorte metódu convertToLower() s dekorátorom „api“, ktorý skonvertuje druhý vstupný text na malé písmená.
@ Informácie o skladbe 2 ;
@ api
convertToUpper ( aktuálne informácie1 ) {
toto . Informácie1 = aktuálne informácie1. na veľké písmená ( ) ;
}
@ api
convertToLower ( aktuálne informácie1 ) {
toto . Informácie2 = aktuálne informácie1. na malé písmená ( ) ;
}
Celý kód „js“ vyzerá takto:
childtComp.html
Zobrazujeme hodnoty (Information1 a Information2), ktoré pochádzajú zo súboru „js“.
< šablóna >< blesk - názov karty = 'dieťa' >
Veľké písmená :& nbsp ; < b > { Informácie1 } b < br >
Malými písmenami :& nbsp ; < b > { Informácie2 } b >
blesk - kartu >
šablóna >
parentComp.js
Vytvárame dve obslužné metódy, ktoré vyberajú podradenú HTML šablónu prostredníctvom querySelector(). Uistite sa, že musíte odovzdať správne metódy, ktoré konvertujú text na veľké alebo malé písmená.
handleEvent1 ( udalosť ) {toto . šablóna . querySelector ( 'c-childt-comp' ) . convertToUpper ( udalosť. cieľ . hodnotu ) ;
}
handleEvent2 ( udalosť ) {
toto . šablóna . querySelector ( 'c-childt-comp' ) . convertToLower ( udalosť. cieľ . hodnotu ) ;
}
Celý kód „js“ vyzerá takto:
parentComp.html
Vytvorte vstupný text s udalosťami spracovania pre oboch. Umiestnite podradený komponent do tohto nadradeného komponentu.
< šablóna >< blesk - názov karty = 'rodič' >
< stred >
< blesk - vstupný štítok = 'Zadajte text malými písmenami' pri zmene = { handleEvent1 } > blesk - vstup >
stred >
< br < br >
< stred >
< blesk - vstupný štítok = 'Zadajte text veľkými písmenami' pri zmene = { handleEvent2 } > blesk - vstup >
stred >
< br < br < br >
< c - dieťat - komp > c - dieťat - komp >
blesk - kartu >
šablóna >
Výkon:
Teraz prejdite do svojej organizácie Salesforce a umiestnite nadradený komponent na stránku „Záznam“.
V používateľskom rozhraní uvidíte dva textové vstupy.
Napíšme nejaký text do prvého vstupu a uvidíte, že text sa skonvertuje na veľké písmená a zobrazí sa v komponente Child.
Napíšte nejaký text do druhého vstupu a uvidíte, že text sa skonvertuje na malé písmená a zobrazí sa v komponente Child.
Komunikácia dieťaťa s rodičom
Podobne ako v predchádzajúcej komunikácii, na komunikáciu dieťaťa s rodičom by sa obe zložky mali navzájom týkať. Dieťa môžeme oznámiť rodičovi tromi rôznymi prístupmi: zavolať rodiča dieťaťu pomocou jednoduchej udalosti a privolať rodiča dieťaťu pomocou udalosti s údajmi a prebublávaním udalostí. V tomto návode sa pozrieme na jednoduchú udalosť.
Aby sme mohli oznámiť dieťa rodičovi, musíme vytvoriť a odoslať udalosti. Na to je potrebné vytvoriť vlastnú udalosť. Vlastná udalosť je udalosť, ktorú vytvoríte sami. Môžeme ho vytvoriť pomocou nového kľúčového slova. Event_Name môže byť čokoľvek (môže to byť reťazec, nie viac ako veľké písmená alebo číslice). Zatiaľ nebudeme diskutovať o možnostiach.
Syntax : new CustomEvent(‘Event_Name’,{options…})
Teraz máte vlastnú udalosť. Ďalším krokom je odoslanie udalosti. Na odoslanie udalosti musíme zadať udalosť, ktorú sme vytvorili v metóde EventTarget.dispatchEvent().
Syntax : this.displatchEvent(new CustomEvent(‘Event_Name’,{options…})
Nakoniec musíme zvládnuť udalosť. Teraz musíme zavolať podriadený komponent vo vašom nadradenom komponente. Zadajte názov udalosti zadaním predpony „on“ pred názvom udalosti. Na to je potrebný obslužný program poslucháča udalostí.
Syntax:
< c - dieťa - komponent onyourEventName = { poslucháčHandler } > c - dieťa - komponent >Príklad:
V tomto príklade vytvoríme jeden nadradený komponent (exampleParent) a dva podradené komponenty.
- V prvom Child (exampleChild) vytvoríme vstupný text, ktorý umožní užívateľovi poskytnúť nejaký text. Rovnaký text sa zobrazuje v nadradenom komponente veľkými písmenami.
- V druhom Child (child2) vytvoríme vstupný text, ktorý umožní užívateľovi poskytnúť nejaký text. Rovnaký text sa zobrazí v nadradenom komponente malými písmenami.
exampleChild.js
Vytvoríme metódu handleChange1, ktorá vytvorí CustomEvent „linuxhintevent1“ s podrobnosťami ako cieľovou hodnotou. Potom túto udalosť odošleme. Do tohto súboru „js“ vložte nasledujúci úryvok.
// spracovanie udalostirukoväťZmeniť1 ( udalosť ) {
udalosť. zabrániťPredvolené ( ) ;
konšt meno1 = udalosť. cieľ . hodnotu ;
konšt vyberteUdalosť1 = Nový CustomEvent ( 'linuxhintevent1' , {
detail : meno1
} ) ;
toto . udalosť odoslania ( vyberteUdalosť1 ) ;
}
exampleChild.html
Predchádzajúca metóda handle, ktorá je vytvorená v „js“, je spracovaná na základe bleskového vstupu v komponente HTML.
< šablóna >< blesk - názov karty = 'dieťa 1' >
< div trieda = 'slds-m-around_medium' >
< blesk - vstupný štítok = 'Zadajte text malými písmenami' pri zmene = { rukoväťZmeniť1 } > blesk - vstup >
div >
blesk - kartu >
šablóna >
child2.js
Vytvoríme metódu handleChange2, ktorá vytvorí CustomEvent „linuxhintevent2“ s detailom ako cieľovou hodnotou. Potom túto udalosť odošleme.
Zmeniť rukoväť2 ( udalosť ) {udalosť. zabrániťPredvolené ( ) ;
konšt meno2 = udalosť. cieľ . hodnotu ;
konšt selectEvent2 = Nový CustomEvent ( 'linuxhintevent2' , {
detail : meno2
} ) ;
toto . udalosť odoslania ( selectEvent2 ) ;
}
dieťa2.html
Predchádzajúca metóda handle, ktorá je vytvorená v „js“, je spracovaná na základe bleskového vstupu v komponente HTML.
< šablóna >< blesk - názov karty = 'dieťa 2' >
< div trieda = 'slds-m-around_medium' >
< blesk - vstupný štítok = 'Zadajte text veľkými písmenami' pri zmene = { Zmeniť rukoväť2 } > blesk - vstup >
div >
blesk - kartu >
šablóna >
exampleParent.js: Vložte tento úryvok do svojho súboru „js“ v rámci triedy.
- Skonvertujte vstup na veľké písmená pomocou funkcie toUpperCase() v handleEvent1() a uložte ho do premennej Information1
- Skonvertujte vstup na malé písmená pomocou funkcie toLowerCase() v handleEvent2() a uložte ho do premennej Information2.
// Konvertujte vstup na veľké písmená pomocou funkcie toUpperCase().
// v handleEvent1() a uložíme do premennej Information1
handleEvent1(udalosť) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Konvertujte vstup na malé písmená pomocou funkcie toLowerCase().
// v handleEvent2() a uložíme do premennej Information2
handleEvent2(udalosť) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Teraz zobrazte dve premenné (Information1 & Information2) v rodičovskom komponente HTML zadaním oboch komponentov Child.
<šablóna>< div trieda = 'slds-m-around_medium' >
Správa Child-1 veľkými písmenami: < b > {Information1} < / b < br >
Správa Child-2 napísaná malými písmenami: < b > {Information2} < / b < br >
< / b < br >
< / div >
< / blesková karta>
< / šablóna>
Výkon:
Teraz prejdite do svojej organizácie Salesforce a umiestnite nadradený komponent na stránku „Záznam“.
Môžete vidieť, že v nadradenej časti existujú dva podradené komponenty.
Napíšme nejaký text do vstupného textu pod komponentom Child 1. Vidíme, že náš text je v nadradenom komponente zobrazený veľkými písmenami.
Zadajte nejaký text do vstupného textu pod komponentom Child 2. Vidíme, že náš text je v nadradenom komponente zobrazený malými písmenami.
Je tiež možné zadať oba texty naraz.
Model PubSub
Tento model môžete použiť, keď pracujete s nezávislými komponentmi (ktoré spolu nesúvisia) a ak chcete posielať informácie z jedného komponentu do druhého. PubSub je skratka pre Publish and Subscribe. Komponent, ktorý odosiela údaje, je známy ako Vydavateľ a komponent, ktorý prijíma údaje, je známy ako Predplatiteľ. Na odosielanie udalostí medzi komponentmi je potrebné použiť modul pubsub. Je to už preddefinované a dané službou Salesforce. Názov súboru je pubsub. Musíte vytvoriť komponent LWC a zadať tento kód do súboru javascript, ktorý je „pubsub.js“.
Príklad:
Vytvorme dve zložky – Publish a Subscribe.
V Publish umožňujeme používateľom vytvárať vstupný text. Kliknutím na tlačidlo sa v komponente Subscribe prijímajú údaje veľkými a malými písmenami.
publish.js
Vložte tento kód do svojho súboru JSON. Tu získame informácie a zverejníme ich.
Informačná premenná bude veľká a informácia1 bude malá. Uistite sa, že ste tento príkaz o importe zahrnuli na začiatok kódu – importujte pubsub z „c/pubsub“.
informácieinformácie2
// Získajte informácie veľkými a malými písmenami
informationHandler ( udalosť ) {
toto . informácie = udalosť. cieľ . hodnotu ;
toto . informácie2 = udalosť. cieľ . hodnotu ;
}
// Zverejnite obe informácie (veľkými aj malými písmenami)
publishHandler ( ) {
pubsub. zverejniť ( 'Publikovať' , toto . informácie )
pubsub. zverejniť ( 'Publikovať' , toto . informácie2 )
}
Malo by to vyzerať takto:
publikovať.html
Najprv vytvoríme bleskový vstup na prijatie textu s informáciami o obsluhe. Potom sa vytvorí jedno tlačidlo s funkciou onclick. Tieto funkcie sú v predchádzajúcom útržku kódu „js“.
<šablóna>< / blesková karta>
< / šablóna>
odber.js
Vložte tento kód do svojho súboru JSON. Tu najprv informácie odoberieme tak, že ich prevedieme na veľké a malé písmená oddelene v rámci metódy callSubscriber(). Potom túto metódu vyvoláme prostredníctvom metódy connectcallback(). Uistite sa, že ste tento príkaz o importe zahrnuli na začiatok kódu – importujte pubsub z „c/pubsub“.
informácieinformácie2
// vyvolanie funkcie callSubscriber()
pripojené spätné volanie ( ) {
toto . hovor predplatiteľ ( )
}
// Odoberajte informácie prevodom na veľké písmená
hovor predplatiteľ ( ) {
pubsub. predplatiť ( 'Publikovať' , ( informácie ) => {
toto . informácie = informácie. na veľké písmená ( ) ;
} ) ,
// Odoberajte informácie prevodom na malé písmená
pubsub. predplatiť ( 'Publikovať' , ( informácie2 ) => {
toto . informácie2 = informácie2. na malé písmená ( ) ;
} )
}
Malo by to vyzerať takto:
predplatiť.html
Text zobrazujeme veľkými písmenami (uložený v informáciách) a malými písmenami (uloženými v informáciách2).
<šablóna>< div trieda = 'slds-p-around_medium' >
Informácie prijaté veľkými písmenami - < b > {informácie} < / b < br >
Informácie prijaté malými písmenami - < b > {information2} < / b >
< / div >
< / blesková karta>
< / šablóna>
Výkon:
Pridajte tieto dva komponenty na svoju stránku. Uistite sa, že oba komponenty sú na rovnakej strane. V opačnom prípade funkcia nebude fungovať.
Zadajte nejaký text do komponentu „Publikovať“ a kliknite na tlačidlo „Odoslať údaje“. Vidíme, že text je prijímaný veľkými a malými písmenami.
Záver
Teraz sme schopní komunikovať s komponentmi LWC prostredníctvom konceptu udalostí v Salesforce LWC. V rámci tohto sprievodcu sme sa naučili, ako komunikovať od rodiča k dieťaťu a od dieťaťa k rodičovi. Model PubSub sa používa v prípade, že vaše komponenty spolu nesúvisia (nie Parent – Child). Každý scenár je vysvetlený jednoduchým príkladom a uistite sa, že ste do súboru „meta-xml“ zahrnuli kód, ktorý je uvedený na začiatku tejto príručky.