Ang mga kaganapan sa LWC ay ginagamit upang makipag-usap sa mga bahagi. Kung may mga kaugnay na bahagi, maaari itong makipag-ugnayan mula sa Magulang sa Anak o Anak sa Magulang. Kung mayroong dalawang hindi magkakaugnay na bahagi, maaari tayong makipag-ugnayan sa pamamagitan ng modelong PubSub (Publish-Subscribe) o sa Lightning Message Service (LMS). Sa gabay na ito, tatalakayin natin kung paano makipag-ugnayan sa mga kaganapan mula sa Magulang sa Bata, Bata sa Magulang, at magkakaugnay na mga bahagi gamit ang modelong PubSub.
Maaari mong ilagay ang mga bahagi sa iyong Record Page, App Page, o Home Page. Hindi namin muling tutukuyin ang file na ito (meta-xml) sa ilalim ng mga halimbawang snippet ng code:
bersyon ng xml = '1.0' ?>
< LightningComponentBundle xmlns = 'http://soap.sforce.com/2006/04/metadata' >
< apiVersion > 57.0 apiVersion >
< isExposed > totoo isExposed >
< mga target >
< target > kidlat__RecordPage target >
< target > kidlat__AppPage target >
< target > kidlat__HomePage target >
mga target >
LightningComponentBundle >
Komunikasyon ng Magulang sa Anak
Kung ang dalawang bahagi ay nauugnay sa isa't isa, posible ang komunikasyong ito. Dito, ipinapadala ng Magulang ang data sa Bata. Ang parent component ang may hawak ng Child component. Sa diskarteng ito, maipapasa natin ang Primitive data (Integer, String, Boolean, atbp) mula sa Parent to Child, ipasa ang Non-Primitive na data (Array, Object, Array of Objects, atbp) mula sa Parent to Child, pagpasa ng data sa ang bahagi ng Bata na may aksyon sa Magulang.
Upang maiparating ang Magulang sa Anak, kailangan nating gawing makikita ng publiko ang mga field, katangian, at pamamaraan sa bahaging Bata. Magagawa ito sa pamamagitan ng pagdekorasyon sa mga field, property, at pamamaraan gamit ang 'api' decorator.
Halimbawa : Magdeklara ng variable na may 'api' sa Child component na 'js' na file.
@ variable ng api ;
Ngayon, ginagamit ng bahaging Magulang ang bahaging Bata sa HTML file sa pamamagitan ng mga katangian ng HTML.
Halimbawa : Gamitin ang variable sa Parent HTML file.
< c - bata - variable ng comp > c - bata - comp >
Talakayin natin ang ilang halimbawa na naglalarawan kung paano makipag-usap sa Magulang sa Anak.
Halimbawa 1:
Ang pangunahing halimbawang ito ay nagpapakita ng pagkuha ng impormasyong ipinadala ng Magulang sa Bata.
childtComp.js
Una, gumawa kami ng Child component na naglalaman ng variable na 'impormasyon' na available sa publiko.
// Ideklara ang variable bilang pampubliko gamit ang api Decorator@ impormasyon ng api
Maaari mong tingnan ang buong 'js' code sa sumusunod na screenshot:
childtComp.html
Ngayon, tinukoy namin ang variable na ito sa HTML file sa loob ng center tag.
< template >< kidlat - pamagat ng card = 'Bata' >
< gitna >
< b > { impormasyon } b >
gitna >
kidlat - card >
template >
parentComp.js
Wala kaming ginagawa sa 'js' file.
parentComp.html
Ilagay ang nakaraang bahagi ng Bata sa iyong Parent HTML sa pamamagitan ng pagpasa sa pampublikong variable (impormasyon) na may ilang text.
< template >< kidlat - pamagat ng card = 'Magulang' icon - pangalan = 'standard:account' >
< c - bata - comp
impormasyon = 'Hello, nakatanggap ako ng impormasyon...'
> c - bata - comp >
kidlat - card >
template >
Output:
Ngayon, pumunta sa iyong Salesforce Org at ilagay ang Parent component sa page na 'Record'. Makikita mo na natanggap ng bahaging Bata ang impormasyon mula sa Magulang.
Halimbawa 2:
Gumawa tayo ng dalawang input text field na dynamic na tatanggap ng text mula sa UI sa Parent component. Kung ilalagay namin ang unang text sa Parent component, matatanggap ng child component ang text na ito sa uppercase. Katulad nito, natatanggap nito ang teksto sa maliit na titik kung ilalagay natin ang pangalawang teksto.
childtComp.js
Gumawa ng dalawang variable – information1 at information2 – na may track decorator.
- Lumikha ng convertToUpper() na paraan gamit ang 'api' na dekorador na nagko-convert ng unang input na text sa uppercase.
- Lumikha ng convertToLower() na paraan gamit ang 'api' na dekorador na nagko-convert ng pangalawang input text sa lowercase.
@ subaybayan ang Impormasyon2 ;
@ api
convertToUpper ( aktwal na Impormasyon1 ) {
ito . Impormasyon1 = aktwal na Impormasyon1. toUpperCase ( ) ;
}
@ api
convertToLower ( aktwal na Impormasyon1 ) {
ito . Impormasyon2 = aktwal na Impormasyon1. saLowerCase ( ) ;
}
Ang buong 'js' code ay mukhang ang mga sumusunod:
childtComp.html
Ipinapakita namin ang mga halaga (Impormasyon1 at Impormasyon2) na nagmumula sa 'js' na file.
< template >< kidlat - pamagat ng card = 'Bata' >
Upper Case :& nbsp ; < b > { Impormasyon1 } b >< br >
Lower Case :& nbsp ; < b > { Impormasyon2 } b >
kidlat - card >
template >
parentComp.js
Gumagawa kami ng dalawang paraan ng handler na pumipili ng template ng child HTML sa pamamagitan ng querySelector(). Siguraduhin na kailangan mong ipasa ang mga tamang paraan na nagko-convert ng text sa uppercase o lowercase.
hawakanKaganapan1 ( kaganapan ) {ito . template . querySelector ( 'c-childt-comp' ) . convertToUpper ( kaganapan. target . halaga ) ;
}
hawakanKaganapan2 ( kaganapan ) {
ito . template . querySelector ( 'c-childt-comp' ) . convertToLower ( kaganapan. target . halaga ) ;
}
Ang buong 'js' code ay mukhang ang mga sumusunod:
parentComp.html
Gumawa ng input text na may mga kaganapan sa paghawak para sa kanilang dalawa. Ilagay ang bahaging Bata sa bahaging ito ng Magulang.
< template >< kidlat - pamagat ng card = 'Magulang' >
< gitna >
< kidlat - label ng pag-input = 'Ipasok ang teksto sa maliit na titik' onchange = { hawakanKaganapan1 } > kidlat - input >
gitna >
< br >< br >
< gitna >
< kidlat - label ng pag-input = 'Ilagay ang teksto sa uppercase' onchange = { hawakanKaganapan2 } > kidlat - input >
gitna >
< br >< br >< br >
< c - bata - comp > c - bata - comp >
kidlat - card >
template >
Output:
Ngayon, pumunta sa iyong Salesforce Org at ilagay ang Parent component sa page na 'Record'.
Makakakita ka ng dalawang text input sa UI.
Sumulat tayo ng ilang text sa unang input at makikita mo na ang text ay na-convert sa uppercase at ipinapakita sa Child component.
Sumulat ng ilang text sa pangalawang input at makikita mo na ang text ay na-convert sa lowercase at ipinapakita sa Child component.
Komunikasyon ng Anak sa Magulang
Katulad ng nakaraang komunikasyon, upang maiparating ang Bata sa Magulang, ang parehong mga bahagi ay dapat na nauugnay sa isa't isa. Maaari naming ipaalam ang Anak sa Magulang sa tatlong magkakaibang paraan: pagtawag sa Magulang sa Anak gamit ang isang simpleng kaganapan at pagtawag sa Magulang sa Anak gamit ang isang kaganapan na may bukol na data at kaganapan. Titingnan natin ang simpleng kaganapan sa gabay na ito.
Upang maiparating ang Bata sa Magulang, kailangan nating likhain at ipadala ang mga kaganapan. Para diyan, kailangang gumawa ng custom na event. Ang isang pasadyang kaganapan ay isang kaganapan na nilikha ng iyong sarili. Magagawa natin ito gamit ang bagong keyword. Ang Event_Name ay maaaring kahit ano (maaari itong maging isang string, hindi lampas sa uppercase, o mga digit). Sa ngayon, hindi namin tatalakayin ang mga opsyon.
Syntax : bagong CustomEvent(‘Event_Name’,{options…})
Ngayon, mayroon kang custom na kaganapan. Ang susunod na hakbang ay ang pagpapadala ng kaganapan. Upang ipadala ang kaganapan, kailangan naming tukuyin ang kaganapan na aming ginawa sa EventTarget.dispatchEvent() na pamamaraan.
Syntax : this.displatchEvent(new CustomEvent(‘Event_Name’,{options…})
Sa wakas, kailangan nating pangasiwaan ang kaganapan. Ngayon, kailangan nating tawagan ang child component sa iyong Parent component. Ipasa ang pangalan ng iyong kaganapan sa pamamagitan ng pagtukoy ng prefix na 'on' sa pangalan ng iyong kaganapan. Kinukuha nito ang tagapangasiwa ng event listener.
Syntax:
< c - anak - component sa iyongEventName = { tagapakinigHandler } > c - anak - sangkap >Halimbawa:
Sa halimbawang ito, gumawa kami ng isang bahagi ng Magulang (exampleParent) at dalawang bahagi ng Bata.
- Sa unang Bata (exampleChild), gumawa kami ng input text na nagbibigay-daan sa user na magbigay ng ilang text. Ang parehong teksto ay ipinapakita sa bahagi ng Magulang sa uppercase.
- Sa pangalawang Bata (bata2), gumawa kami ng input text na nagbibigay-daan sa user na magbigay ng ilang text. Ang parehong teksto ay ipinapakita sa bahagi ng Magulang sa maliit na titik.
exampleChild.js
Gumagawa kami ng paraan ng handleChange1 na gumagawa ng 'linuxhintevent1' CustomEvent na may detalye bilang target na value. Pagkatapos nito, ipinapadala namin ang kaganapang ito. I-embed ang sumusunod na snippet sa 'js' file na ito.
// hawakan ang kaganapanhawakanPagbabago1 ( kaganapan ) {
kaganapan. preventDefault ( ) ;
const pangalan1 = kaganapan. target . halaga ;
const piliin angKaganapan1 = bago CustomEvent ( 'linuxhintevent1' , {
detalye : pangalan1
} ) ;
ito . dispatchEvent ( piliin angKaganapan1 ) ;
}
exampleChild.html
Ang nakaraang paraan ng paghawak na ginawa sa 'js' ay pinangangasiwaan batay sa lightning input sa HTML component.
< template >< kidlat - pamagat ng card = 'Bata 1' >
< div klase = 'slds-m-around_medium' >
< kidlat - input label = 'Maglagay ng Text sa lowercase' onchange = { hawakanPagbabago1 } > kidlat - input >
div >
kidlat - card >
template >
bata2.js
Gumagawa kami ng paraan ng handleChange2 na lumilikha ng CustomEvent na 'linuxhintevent2' na may detalye bilang target na halaga. Pagkatapos nito, ipinapadala namin ang kaganapang ito.
hawakanPagbabago2 ( kaganapan ) {kaganapan. preventDefault ( ) ;
const pangalan2 = kaganapan. target . halaga ;
const piliin angKaganapan2 = bago CustomEvent ( 'linuxhintevent2' , {
detalye : pangalan2
} ) ;
ito . dispatchEvent ( piliin angKaganapan2 ) ;
}
bata2.html
Ang nakaraang paraan ng paghawak na ginawa sa 'js' ay pinangangasiwaan batay sa lightning input sa HTML component.
< template >< kidlat - pamagat ng card = 'Bata 2' >
< div klase = 'slds-m-around_medium' >
< kidlat - input label = 'Ipasok ang Text sa uppercase' onchange = { hawakanPagbabago2 } > kidlat - input >
div >
kidlat - card >
template >
exampleParent.js: I-embed ang snippet na ito sa iyong 'js' na file sa loob ng klase.
- I-convert ang input sa uppercase gamit ang toUpperCase() function sa handleEvent1() at iimbak ito sa Information1 variable
- I-convert ang input sa lowercase gamit ang toLowerCase() function sa handleEvent2() at iimbak ito sa Information2 variable.
// I-convert ang input sa uppercase gamit ang toUpperCase() function
// sa handleEvent1() at mag-imbak sa Information1 variable
handleEvent1(event) {
const input1 = event.detail;
ito.Information1 = input1.toUpperCase();
}
@track Information2;
// I-convert ang input sa lowercase gamit ang toLowerCase() function
// sa handleEvent2() at mag-imbak sa Information2 variable
handleEvent2(event) {
const input2 = event.detail;
this.Information2 = input2.toLowerCase();
}
exampleParent.html
Ngayon, ipakita ang dalawang variable (Impormasyon1 at Impormasyon2) sa Parent HTML component sa pamamagitan ng pagtukoy sa parehong bahagi ng Child.
< div klase = 'slds-m-around_medium' >
Child-1 na Mensahe sa Malaking titik : < b > {Impormasyon1} < / b >< br >
Child-2 na Mensahe sa Lowercase : < b > {Impormasyon2} < / b >< br >
< / b >< br >
< / div >
< / lightning-card>
< / template>
Output:
Ngayon, pumunta sa iyong Salesforce Org at ilagay ang Parent component sa page na 'Record'.
Makikita mong mayroong dalawang bahagi ng Bata sa Magulang.
Mag-type tayo ng ilang text sa input text sa ilalim ng bahaging Child 1. Makikita natin na ang ating teksto ay ipinapakita sa malalaking titik sa bahagi ng Magulang.
Magbigay ng ilang text sa input text sa ilalim ng bahaging Child 2. Makikita natin na ang ating teksto ay ipinapakita sa maliit na titik sa bahagi ng Magulang.
Posible ring ipasok ang parehong mga teksto sa isang pagkakataon.
Modelo ng PubSub
Kapag nagtatrabaho ka sa mga independiyenteng bahagi (hindi nauugnay sa isa't isa) at kung gusto mong ipadala ang impormasyon mula sa isang bahagi patungo sa isa pa, maaari mong gamitin ang modelong ito. Ang PubSub ay nangangahulugang I-publish at Mag-subscribe. Ang component na nagpapadala ng data ay kilala bilang Publisher at ang component na tumatanggap ng data ay kilala bilang Subscriber. Kinakailangang gamitin ang pubsub module upang ipadala ang mga kaganapan sa pagitan ng mga bahagi. Na-predefine na ito at ibinigay ng Salesforce. Ang pangalan ng file ay pubsub. Kailangan mong lumikha ng LWC component at i-type ang code na ito sa iyong javascript file na 'pubsub.js'.
Halimbawa:
Gumawa tayo ng dalawang bahagi – Mag-publish at Mag-subscribe.
Sa Publish, pinapayagan namin ang mga user na gumawa ng input text. Sa pag-click sa button, ang data ay natatanggap sa uppercase at lowercase sa Subscribe component.
publish.js
I-embed ang code na ito sa iyong JSON file. Dito, nakukuha namin ang impormasyon at nai-publish ang impormasyon.
Ang variable ng impormasyon ay magiging uppercase at ang information1 ay lowercase. Siguraduhing isama mo ang import statement na ito sa simula ng code – import pubsub mula sa ‘c/pubsub’.
impormasyonimpormasyon2
// Kunin ang Impormasyon sa uppercase at lowercase
informationHandler ( kaganapan ) {
ito . impormasyon = kaganapan. target . halaga ;
ito . impormasyon2 = kaganapan. target . halaga ;
}
// I-publish ang parehong impormasyon (Sa uppercase at lowercase)
publishHandler ( ) {
pubsub. ilathala ( 'I-publish' , ito . impormasyon )
pubsub. ilathala ( 'I-publish' , ito . impormasyon2 )
}
Dapat itong magmukhang:
publish.html
Una, gumawa kami ng lightning-input para tanggapin ang text na may impormasyon ng handler. Pagkatapos nito, nilikha ang isang pindutan gamit ang pag-andar ng onclick. Ang mga function na ito ay nasa nakaraang 'js' code snippet.
< / lightning-card>
< / template>
subscribe.js
I-embed ang code na ito sa iyong JSON file. Dito, mag-subscribe muna kami sa impormasyon sa pamamagitan ng pag-convert nito sa uppercase at lowercase na magkahiwalay sa loob ng callSubscriber() method. Pagkatapos nito, ginagamit namin ang pamamaraang ito sa pamamagitan ng connectedcallback() na pamamaraan. Siguraduhing isama mo ang import statement na ito sa simula ng code – import pubsub mula sa ‘c/pubsub’.
impormasyonimpormasyon2
// invoking the callSubscriber()
konektadoCallback ( ) {
ito . callSubscriber ( )
}
// I-subscribe ang impormasyon sa pamamagitan ng pag-convert sa uppercase
callSubscriber ( ) {
pubsub. mag-subscribe ( 'I-publish' , ( impormasyon ) => {
ito . impormasyon = impormasyon. toUpperCase ( ) ;
} ) ,
// I-subscribe ang impormasyon sa pamamagitan ng pag-convert sa lowercase
pubsub. mag-subscribe ( 'I-publish' , ( impormasyon2 ) => {
ito . impormasyon2 = impormasyon2. saLowerCase ( ) ;
} )
}
Dapat itong magmukhang ganito:
subscribe.html
Ipinapakita namin ang teksto sa malalaking titik (naka-imbak sa impormasyon) at maliliit na titik (naka-imbak sa impormasyon2).
< div klase = 'slds-p-around_medium' >
Natanggap na impormasyon sa uppercase - < b > {impormasyon} < / b >< br >
Natanggap na impormasyon sa lowercase - < b > {impormasyon2} < / b >
< / div >
< / lightning-card>
< / template>
Output:
Idagdag ang dalawang bahaging ito sa iyong pahina. Siguraduhin na ang parehong mga bahagi ay nasa parehong pahina. Kung hindi, hindi gagana ang functionality.
Maglagay tayo ng ilang text sa bahaging 'I-publish' at i-click ang button na 'Ipadala ang Data'. Makikita natin na ang teksto ay natanggap sa uppercase at lowercase.
Konklusyon
Ngayon, nagagawa na naming makipag-ugnayan sa mga bahagi ng LWC sa pamamagitan ng konsepto ng kaganapan sa Salesforce LWC. Bilang bahagi ng gabay na ito, natutunan namin kung paano makipag-usap mula sa Magulang sa Anak at mula sa Bata sa Magulang. Ang modelo ng PubSub ay ginagamit kung sakaling ang iyong mga bahagi ay hindi nauugnay sa isa't isa (hindi Magulang - Anak). Ang bawat senaryo ay ipinaliwanag sa isang simpleng halimbawa at tiyaking isasama mo ang code na ibinigay sa simula ng gabay na ito sa 'meta-xml' na file.