„Lightning Web Component“ (LWC) turi savo gyvavimo ciklą, skirtą įterpti komponentą (-us) į DOM, pateikti jį ir pašalinti komponentą (-us) iš DOM. ConnectCallback() (montavimo fazėje) yra vienas iš gyvavimo ciklo metodų, kuris suaktyvinamas, kai komponentas įdedamas į DOM. Šiame vadove aptarsime Connectcallback() ir skirtingus scenarijus, kuriuose yra šis metodas, pateikdami pavyzdžius.
- Konstruktorius () yra pirmasis gyvenimo ciklo kabliuko metodas, kuris iškviečiamas, kai sukuriamas „Komponento“ egzempliorius. Šiame etape komponentų savybės nebus paruoštos. Jei norite pasiekti pagrindinį elementą, turime naudoti „this.template“. Kadangi antrinių komponentų šiame etape nebus, negalime pasiekti ir antrinių komponentų. Šiame metode naudojamas Super().
- Connectcallback () yra antrasis metodas (2 fazė), kuris iškviečiamas, kai elementas įterpiamas į DOM. Šiuo atveju kabliukas teka nuo tėvų iki vaiko. Šiame etape komponentų savybės nebus paruoštos. Jei norite pasiekti pagrindinį elementą, turime naudoti „this.template“. Kadangi antrinių komponentų šiame etape nebus, negalime pasiekti ir antrinių komponentų.
- pateikti (): atvaizduojama išorinė fazė. Pateikiamas pirminis komponentas, o tada antrinis komponentas, jei toks yra. Pateikus pirminį komponentą, jis pereina į antrinį komponentą (konstruktorius, prijungtas atgalinis skambutis, atvaizdavimas) ir atlieka tuos pačius veiksmus kaip ir pirminis komponentas.
- pateiktas Atgalinis skambutis (): Kai komponento atvaizdavimas baigtas ir po to norite atlikti bet kokią operaciją, iškviečiamas šis metodas.
- atjungtasAtgalinis skambutis (): Šiame etape elementas pašalinamas iš DOM (priešingai nei prijungtas atgalinis skambutis ()).
- ErrorCallback() iškviečiamas, kai gyvavimo cikle įvyksta klaida.
Connectedcallback() struktūra
Naudojant prijungtą atgalinį skambutį ():
- Apibrėžkite kintamąjį ir nustatykite nuosavybės vertę.
- Paskambinkite jo viduje esančiam „Apex“.
- Kurkite ir išsiųskite įvykius.
- UI API galima iškviesti.
- Navigacijos paslauga jos viduje.
Jis turi būti nurodytas „JavaScript“ faile taip:
prijungtas atgalinis skambutis ( ) {
// daryk...
}
Visuose pavyzdžiuose naudojamas šis „meta.xml“ failas. Kiekviename pavyzdyje to nenurodysime. LWC komponentus galima įtraukti į įrašų puslapį, programos puslapį ir pagrindinį puslapį.
versija = '1.0' ?>
< / taikiniai>
< / LightningComponentBundle>
1 pavyzdys:
Kai komponentas bus įkeltas į vartotojo sąsają, pademonstruosime konstruktoriaus () ir connectcallback () fazę.
connectCallBack.html
<šablonas><žaibo korta titulą = „Prisijungtas atgalinis skambutis“ >
< / žaibo korta>
< / šablonas>
connectCallBack.js
// Montavimo fazė – konstruktorius()konstruktorius ( ) {
super ( )
konsolė. žurnalas ( 'konstruktorius paskambino' )
}
// Montavimo fazė – prijungtasCallback()
prijungtas atgalinis skambutis ( ) {
konsolė. žurnalas ( 'sujungtas atgalinis skambutis' )
}
Tai atrodo taip:
Išvestis:
Pridėkite šį komponentą į bet kurio objekto puslapį „Įrašyti“.
Patikrinkite puslapį (spustelėkite kairėje ir pasirinkite 'Tikrinti'). Tada eikite į skirtuką „Konsolė“.
2 pavyzdys:
Šiame pavyzdyje mes sukursime vaisių su takelių dekoratoriumi ir nustatysime nuosavybės vertę į „Mango“ prisijungę prie ryšio atšaukimo() metodo. Tai rodoma vartotojo sąsajoje.
pirmasisPavyzdys.html
<šablonas><žaibo korta titulą = 'Ypatybių nustatymas' >
< div klasė = 'slds-var-m-around_medium' >
< b > Vaisiaus pavadinimas: < / b > {vaisius}
< / div >
< / žaibo korta>
< / šablonas>
firstExample.js
importuoti { Žaibo elementas , takelį } iš 'sėkmė' ;eksportuoti numatytas klasė PirmasPavyzdys tęsiasi Žaibo elementas {
@ sekti vaisius ;
prijungtas atgalinis skambutis ( ) {
// Ypatybės vertės nustatymas į Mango
tai . vaisių = 'Mango' ;
}
}
Išvestis:
Pridėkite šį komponentą į bet kurio objekto puslapį „Įrašyti“. Čia mes įtraukiame jį į puslapį „Paskyros įrašas“. Pamatysite, kad vaisius yra 'Mango'.
3 pavyzdys:
Naudokite ankstesnį kodą ir pakeiskite kai kuriuos teiginius „js“ ir „html“ failuose.
Sukurkite naują kintamąjį, kuris yra „number“ su 500 „js“ faile. Jei skaičius didesnis nei 500, nustatykite vaisius į „didesnis nei 500“. Kitu atveju nustatykite vaisių kaip „lygus 500“.
pirmasisPavyzdys.html
<šablonas><žaibo korta titulą = 'Ypatybių nustatymas' >
< div klasė = „slds-var-m-around_medium“ >
< b > Kaina: < / b > {vaisius}
< / div >
< / žaibo korta>
< / šablonas>
firstExample.js
@ sekti vaisius ;prijungtas atgalinis skambutis ( ) {
tegul numeris = 500 ;
jeigu ( numerį > 500 ) {
tai . vaisių = 'daugiau nei 500' ;
}
Kitas {
tai . vaisių = 'lygus 500' ;
}
}
Išvestis:
Skaičius yra 500. Taigi vaisiaus rezultatas yra „lygus 500“.
4 pavyzdys:
Šiame scenarijuje mes grąžiname paskyros įrašus (Paskyros objektą) naudodami connectcallback() metodą.
- Pirmiausia parašome „Apex“ klasę, kuri pateikia pirmųjų 10 paskyrų sąrašą su laukais „ID“, „Pavadinimas“, „Pramonė“ ir „Reitingas“.
- Toliau stebime sąskaitas ir grąžiname jas prisijungus atgal () metodu, iškviesdami metodą iš Apex klasės.
- HTML faile mes jį naudojame kiekvienai direktyvai, kuri kartoja paskyras ir pateikia pavadinimą ir pramonės šaką.
AccountData.apxc
viešas su bendrinimo klase AccountData {@AuraEnabled (talpykla = tiesa)
public static List
Sąrašas
grąžinti sąskaitų sąrašą;
}
}
secondExample.html
<šablonas><žaibo korta titulą = „Rodyti paskyrų sąrašą“ >
< div klasė = „slds-var-m-around_medium“ >
<šablonas if:true = { sąskaitas } >
<šablonas dėl : kiekvienas = { sąskaitas } dėl :prekė = 'account_rec' >
< p Raktas = { account_rec. Id } >< b > Paskyra: < / b > {account_rec.Name} < b > Industrija: < / b > {account_rec.Pramonė} < / p >
< / šablonas>
< / šablonas>
< / div >
< / žaibo korta>
< / šablonas>
secondExample.js
Importuokite „ReturnAcc“ iš „Apex“. klasė :importuoti returnAcc iš „@salesforce/apex/AccountData.returnAcc“ ;
Rašyti tai kodas „js“ klasė :
@ sekti sąskaitas ;
@ takelio klaida ;
prijungtas atgalinis skambutis ( ) {
returnAcc ( )
// Grąžinti sąskaitas
. tada ( rezultatas => {
tai . sąskaitas = rezultatas ;
tai . klaida = neapibrėžtas ;
} )
. sugauti ( klaida => {
tai . klaida = klaida ;
tai . sąskaitas = neapibrėžtas ;
} ) ;
}
Išvestis:
Pirmieji 10 sąskaitos įrašų grąžinami su paskyros pavadinimu ir pramonės šaka.
Išvada
Dabar daugumoje atvejų galite naudoti „connectcallback()“ metodą dirbdami su „Apex“ duomenimis LWC. Šiame vadove aptarėme, kaip nustatyti nuosavybės vertę naudojant connectcallback() ir įtraukėme į jį Apex. Norėdami geriau suprasti, pirmiausia pateikėme pavyzdį, kuriame buvo parodyti konstruktoriaus () ir connectcallback () metodai. Turite patikrinti savo tinklalapį ir peržiūrėti jį konsolėje.