Događaji u LWC-u koriste se za komunikaciju s komponentama. Ako postoje povezane komponente, može biti moguća komunikacija od roditelja prema djetetu ili djeteta prema roditelju. Ako postoje dvije nepovezane komponente, možemo komunicirati putem PubSub (Publish-Subscribe) modela ili s Lightning Message Service (LMS). U ovom vodiču raspravljat ćemo o tome kako komunicirati s događajima od roditelja prema djetetu, djeteta prema roditelju i međusobno povezanim komponentama pomoću modela PubSub.
Komponente možete postaviti na stranicu zapisa, stranicu aplikacije ili početnu stranicu. Nećemo ponovno navesti ovu datoteku (meta-xml) ispod primjera isječaka koda:
xml verzija = '1,0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVerzija > 57.0 apiVerzija >
< je Izloženo > pravi je Izloženo >
< mete >
< cilj > munja__RecordPage cilj >
< cilj > munja__AppPage cilj >
< cilj > munja__Početna stranica cilj >
mete >
LightningComponentBundle >
Komunikacija roditelja s djetetom
Ako su dvije komponente povezane jedna s drugom, ova komunikacija je moguća. Ovdje Roditelj šalje podatke Djetetu. Roditeljska komponenta sadrži Child komponentu. Ovim pristupom možemo proslijediti primitivne podatke (cijeli broj, niz, Booleov itd.) od roditelja do djeteta, proslijediti neprimitivne podatke (niz, objekt, niz objekata itd.) od roditelja do djeteta, prosljeđujući podatke do komponenta Dijete s djelovanjem na Roditelja.
Kako bismo komunicirali roditelj s djetetom, moramo polja, svojstva i metode dostupne u komponenti dijete učiniti javno vidljivima. To može biti moguće ukrašavanjem polja, svojstava i metoda s 'api' dekoratorom.
Primjer : Deklarirajte varijablu s 'api' u datoteci podređene komponente 'js'.
@ api varijabla ;
Sada roditeljska komponenta koristi dijete komponentu u HTML datoteci putem HTML atributa.
Primjer : Koristite varijablu u nadređenoj HTML datoteci.
< c - dijete - komp varijabla > c - dijete - komp >
Razmotrimo neke primjere koji opisuju kako komunicirati roditelj s djetetom.
Primjer 1:
Ovaj osnovni primjer pokazuje dobivanje informacija koje roditelj šalje djetetu.
childtComp.js
Prvo, stvaramo Child komponentu koja sadrži varijablu 'informacija' koja je javno dostupna.
// Deklarirajte varijablu kao javnu koristeći api Decorator@ api informacije
Možete vidjeti cijeli 'js' kod na sljedećoj snimci zaslona:
childtComp.html
Sada specificiramo ovu varijablu u HTML datoteci unutar središnje oznake.
< šablona >< munja - naslov kartice = 'Dijete' >
< centar >
< b > { informacija } b >
centar >
munja - kartica >
šablona >
parentComp.js
Ne radimo ništa u 'js' datoteci.
parentComp.html
Postavite prethodnu Child komponentu u svoj nadređeni HTML prosljeđivanjem javne varijable (informacije) s nekim tekstom.
< šablona >< munja - naslov kartice = 'Roditelj' ikona - Ime = 'standard:račun' >
< c - dijetet - komp
informacija = 'Dobar dan, dobio sam informaciju...'
> c - dijetet - komp >
munja - kartica >
šablona >
Izlaz:
Sada idite u svoju Salesforce organizaciju i postavite nadređenu komponentu na stranicu 'Snimanje'. Vidjet ćete da je komponenta Dijete primila informacije od Roditelja.
Primjer 2:
Kreirajmo dva polja za unos teksta koja će dinamički prihvaćati tekst iz korisničkog sučelja u nadređenoj komponenti. Ako umetnemo prvi tekst u nadređenu komponentu, podređena komponenta prima ovaj tekst velikim slovima. Slično, prima tekst malim slovima ako umetnemo drugi tekst.
childtComp.js
Stvorite dvije varijable – informacije1 i informacije2 – s dekoratorom staze.
- Napravite metodu convertToUpper() s 'api' dekoratorom koji pretvara prvi ulazni tekst u velika slova.
- Napravite metodu convertToLower() s 'api' dekoratorom koji pretvara drugi ulazni tekst u mala slova.
@ informacije o stazi2 ;
@ api
pretvoritiUGornji ( stvarnaInformacija1 ) {
ovaj . Information1 = stvarnaInformacija1. toUpperCase ( ) ;
}
@ api
pretvoritiuniže ( stvarnaInformacija1 ) {
ovaj . Informacije2 = stvarnaInformacija1. malim slovima ( ) ;
}
Cijeli “js” kod izgleda ovako:
childtComp.html
Prikazujemo vrijednosti (Information1 i Information2) koje dolaze iz datoteke 'js'.
< šablona >< munja - naslov kartice = 'Dijete' >
Velika slova :& nbsp ; < b > { Information1 } b >< br >
Mala slova :& nbsp ; < b > { Informacije2 } b >
munja - kartica >
šablona >
parentComp.js
Stvaramo dvije metode rukovatelja koje odabiru podređeni HTML predložak putem querySelector(). Provjerite trebate li proći ispravne metode koje pretvaraju tekst u velika ili mala slova.
handleEvent1 ( događaj ) {ovaj . šablona . querySelector ( 'c-childt-comp' ) . pretvoritiUGornji ( događaj. cilj . vrijednost ) ;
}
handleEvent2 ( događaj ) {
ovaj . šablona . querySelector ( 'c-childt-comp' ) . pretvoritiuniže ( događaj. cilj . vrijednost ) ;
}
Cijeli “js” kod izgleda ovako:
parentComp.html
Stvorite ulazni tekst s događajima rukovanja za oba. Postavite Child komponentu u ovu Parent komponentu.
< šablona >< munja - naslov kartice = 'Roditelj' >
< centar >
< munja - ulazna oznaka = 'Unesi tekst malim slovima' onchange = { handleEvent1 } > munja - ulazni >
centar >
< br >< br >
< centar >
< munja - ulazna oznaka = 'Unesi tekst velikim slovima' onchange = { handleEvent2 } > munja - ulazni >
centar >
< br >< br >< br >
< c - dijetet - komp > c - dijetet - komp >
munja - kartica >
šablona >
Izlaz:
Sada idite u svoju Salesforce organizaciju i postavite nadređenu komponentu na stranicu 'Snimanje'.
Na korisničkom sučelju vidjet ćete dva unosa teksta.
Napišimo neki tekst u prvi unos i vidjet ćete da je tekst pretvoren u velika slova i prikazan u komponenti Child.
Napišite neki tekst u drugi unos i vidjet ćete da je tekst pretvoren u mala slova i prikazan u komponenti Child.
Komunikacija između djeteta i roditelja
Slično prethodnoj komunikaciji, da bi se dijete komuniciralo s roditeljem, obje komponente trebaju biti povezane jedna s drugom. Dijete roditelju možemo priopćiti na tri različita pristupa: pozivanje roditelja djetetu korištenjem jednostavnog događaja i pozivanje roditelja djetetu korištenjem događaja s podacima i događajima u obliku mjehurića. Pogledat ćemo jednostavan događaj u ovom vodiču.
Kako bismo komunicirali dijete s roditeljem, moramo stvoriti i poslati događaje. Za to je potrebno izraditi prilagođeni događaj. Prilagođeni događaj je događaj koji ste kreirali sami. Možemo ga stvoriti pomoću nove ključne riječi. Event_Name može biti bilo što (može biti niz, koji ne prelazi velika slova, ili znamenke). Za sada nećemo raspravljati o opcijama.
Sintaksa : novi CustomEvent('Event_Name',{options…})
Sada imate prilagođeni događaj. Sljedeći korak je slanje događaja. Da bismo poslali događaj, moramo navesti događaj koji smo kreirali u metodi EventTarget.dispatchEvent().
Sintaksa : this.displatchEvent(new CustomEvent('Event_Name',{options…})
Konačno, moramo se pozabaviti događajem. Sada moramo pozvati podređenu komponentu u vašoj roditeljskoj komponenti. Proslijedite naziv događaja navođenjem prefiksa 'on' u nazivu događaja. Ovo uzima rukovatelja slušatelja događaja.
Sintaksa:
< c - dijete - komponenta onyourEventName = { listenerHandler } > c - dijete - komponenta >Primjer:
U ovom primjeru stvaramo jednu nadređenu komponentu (exampleParent) i dvije podređene komponente.
- U prvom djetetu (exampleChild), stvaramo ulazni tekst koji korisniku omogućuje unos teksta. Isti tekst se prikazuje u nadređenoj komponenti velikim slovima.
- U drugom djetetu (child2), stvaramo ulazni tekst koji korisniku omogućuje unos teksta. Isti tekst se prikazuje u nadređenoj komponenti malim slovima.
exampleChild.js
Stvaramo metodu handleChange1 koja stvara CustomEvent 'linuxhintevent1' s pojedinostima kao ciljnom vrijednošću. Nakon toga otpremamo ovaj događaj. Ugradite sljedeći isječak u ovu 'js' datoteku.
// obraditi događajručkaPromjena1 ( događaj ) {
događaj. spriječiZadano ( ) ;
konst ime1 = događaj. cilj . vrijednost ;
konst odaberite Događaj1 = novi CustomEvent ( 'linuxhintevent1' , {
detalj : ime1
} ) ;
ovaj . dispatchEvent ( odaberite Događaj1 ) ;
}
primjerDjeteta.html
Prethodnom metodom rukovanja koja je stvorena u “js” upravlja se na temelju munjevitog unosa u HTML komponenti.
< šablona >< munja - naslov kartice = 'Dijete 1' >
< div razreda = 'slds-m-oko_srednjeg' >
< munja - oznaka unosa = 'Unesite tekst malim slovima' onchange = { ručkaPromjena1 } > munja - ulazni >
div >
munja - kartica >
šablona >
dijete2.js
Kreiramo metodu handleChange2 koja stvara CustomEvent 'linuxhintevent2' s detaljima kao ciljnom vrijednošću. Nakon toga otpremamo ovaj događaj.
ručkaPromjena2 ( događaj ) {događaj. spriječiZadano ( ) ;
konst ime2 = događaj. cilj . vrijednost ;
konst odaberite Događaj2 = novi CustomEvent ( 'linuxhintevent2' , {
detalj : ime2
} ) ;
ovaj . dispatchEvent ( odaberite Događaj2 ) ;
}
dijete2.html
Prethodnom metodom rukovanja koja je stvorena u “js” upravlja se na temelju munjevitog unosa u HTML komponenti.
< šablona >< munja - naslov kartice = 'Dijete 2' >
< div razreda = 'slds-m-oko_srednjeg' >
< munja - oznaka unosa = 'Unesi tekst velikim slovima' onchange = { ručkaPromjena2 } > munja - ulazni >
div >
munja - kartica >
šablona >
primjerParent.js: Ugradite ovaj isječak u svoju 'js' datoteku unutar klase.
- Pretvorite unos u velika slova pomoću funkcije toUpperCase() u handleEvent1() i pohranite ga u varijablu Information1
- Pretvorite unos u mala slova pomoću funkcije toLowerCase() u handleEvent2() i pohranite ga u varijablu Information2.
// Pretvori unos u velika slova pomoću funkcije toUpperCase().
// u handleEvent1() i pohraniti u varijablu Information1
handleEvent1(event) {
const input1 = event.detail;
this.Information1 = input1.toUpperCase();
}
@track Information2;
// Pretvori unos u mala slova pomoću funkcije toLowerCase().
// u handleEvent2() i pohraniti u varijablu Information2
handleEvent2(event) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
primjerParent.html
Sada prikažite dvije varijable (Information1 & Information2) u nadređenoj HTML komponenti navodeći obje podređene komponente.
< div razreda = 'slds-m-oko_srednjeg' >
Dijete-1 poruka velikim slovima: < b > {Information1} < / b >< br >
Dijete-2 poruka malim slovima: < b > {Informacije2} < / b >< br >
< / b >< br >
< / div >
< / karta munje>
< / predložak>
Izlaz:
Sada idite u svoju Salesforce organizaciju i postavite nadređenu komponentu na stranicu 'Snimanje'.
Možete vidjeti da u Roditelju postoje dvije komponente Child.
Utipkajmo neki tekst u ulazni tekst ispod komponente Child 1. Vidimo da je naš tekst prikazan velikim slovima na roditeljskoj komponenti.
Unesite neki tekst u ulazni tekst ispod komponente Dijete 2. Vidimo da je naš tekst prikazan malim slovima na nadređenoj komponenti.
Također je moguće unijeti oba teksta odjednom.
Model PubSub
Kada radite s neovisnim komponentama (koje nisu povezane jedna s drugom) i ako želite slati informacije s jedne komponente na drugu, možete koristiti ovaj model. PubSub je kratica za Publish i Subscribe. Komponenta koja šalje podatke poznata je kao izdavač, a komponenta koja prima podatke poznata je kao pretplatnik. Za slanje događaja između komponenti potrebno je koristiti modul pubsub. Već je unaprijed definiran i dao ga je Salesforce. Naziv datoteke je pubsub. Morate izraditi LWC komponentu i upisati ovaj kod u svoju javascript datoteku koja je 'pubsub.js'.
Primjer:
Kreirajmo dvije komponente – Objavi i Pretplati se.
U Publishu dopuštamo korisnicima da kreiraju ulazni tekst. Klikom na gumb podaci se primaju velikim i malim slovima u komponenti Pretplata.
objaviti.js
Ugradite ovaj kod u svoju JSON datoteku. Ovdje dobivamo informacije i objavljujemo informacije.
Varijabla informacija bit će velika, a informacija1 mala. Provjerite jeste li uključili ovu izjavu o uvozu na početku koda – import pubsub iz 'c/pubsub'.
informacijainformacije2
// Dobivanje informacija velikim i malim slovima
rukovatelj informacijama ( događaj ) {
ovaj . informacija = događaj. cilj . vrijednost ;
ovaj . informacije2 = događaj. cilj . vrijednost ;
}
// Objavite obje informacije (velikim i malim slovima)
publicHandler ( ) {
pubsub. objaviti ( 'Objaviti' , ovaj . informacija )
pubsub. objaviti ( 'Objaviti' , ovaj . informacije2 )
}
Trebao bi izgledati ovako:
objaviti.html
Prvo, stvaramo munjevit ulaz za prihvaćanje teksta s informacijama rukovatelja. Nakon toga, kreira se jedan gumb s funkcijom onclick. Ove se funkcije nalaze u prethodnom isječku koda 'js'.
< / karta munje>
< / predložak>
pretplatite se.js
Ugradite ovaj kod u svoju JSON datoteku. Ovdje prvo pretplaćujemo informacije pretvarajući ih zasebno u velika i mala slova unutar metode callSubscriber(). Nakon toga ovu metodu pozivamo putem Connectedcallback() metode. Provjerite jeste li uključili ovu izjavu o uvozu na početku koda – import pubsub iz 'c/pubsub'.
informacijainformacije2
// pozivanje callSubscriber()
povezan Povratni poziv ( ) {
ovaj . callSubscriber ( )
}
// Pretplatite informacije pretvaranjem u velika slova
callSubscriber ( ) {
pubsub. pretplatiti se ( 'Objaviti' , ( informacija ) => {
ovaj . informacija = informacija. toUpperCase ( ) ;
} ) ,
// Pretplatite informacije pretvaranjem u mala slova
pubsub. pretplatiti se ( 'Objaviti' , ( informacije2 ) => {
ovaj . informacije2 = informacije2. malim slovima ( ) ;
} )
}
Trebalo bi izgledati ovako:
pretplatite se.html
Tekst prikazujemo velikim slovima (pohranjen u informaciji) i malim slovima (pohranjen u informaciji2).
< div razreda = 'slds-p-oko_srednjeg' >
Podaci primljeni velikim slovima - < b > {informacija} < / b >< br >
Informacije primljene malim slovima - < b > {informacija2} < / b >
< / div >
< / karta munje>
< / predložak>
Izlaz:
Dodajte ove dvije komponente na svoju stranicu. Provjerite nalaze li se obje komponente na istoj stranici. U suprotnom, funkcija neće raditi.
Unesite tekst u komponentu 'Objavi' i kliknite gumb 'Pošalji podatke'. Vidimo da je tekst primljen velikim i malim slovima.
Zaključak
Sada možemo komunicirati s LWC komponentama kroz koncept događaja u Salesforce LWC. U sklopu ovog vodiča naučili smo kako komunicirati od roditelja prema djetetu i od djeteta prema roditelju. PubSub model se koristi u slučaju da vaše komponente nisu povezane jedna s drugom (ne roditelj – dijete). Svaki scenarij objašnjen je jednostavnim primjerom i svakako uključite kôd koji je naveden na početku ovog vodiča u datoteku 'meta-xml'.