Lightning Web komponentam (LWC) ir savs dzīves cikls, lai komponentu(s) ievietotu DOM, renderētu un noņemtu komponentu(s) no DOM. ConnectCallback() (montāžas fāzē) ir viena no LifeCycle metodēm, kas tiek aktivizēta, kad komponents tiek ievietots DOM. Šajā rokasgrāmatā mēs ar piemēriem apspriedīsim savienojuma atzvanīšanu () un dažādus scenārijus, kas ietver šo metodi.
- Konstruktors () ir pirmā metode dzīves cikla āķī, kas tiek izsaukta, kad tiek izveidots gadījums “Komponents”. Komponentu īpašības šajā fāzē nebūs gatavas. Ja vēlaties piekļūt resursdatora elementam, mums ir jāizmanto “this.template”. Tā kā pakārtotie komponenti šajā fāzē nepastāvēs, mēs nevaram piekļūt arī pakārtotajiem komponentiem. Šajā metodē tiek izmantots Super().
- Connectcallback () ir otrā metode (2. fāze), kas tiek izsaukta, kad elements tiek ievietots DOM. Šajā gadījumā āķis plūst no vecāka uz bērnu. Komponentu īpašības šajā fāzē nebūs gatavas. Ja vēlaties piekļūt resursdatora elementam, mums ir jāizmanto “this.template”. Tā kā pakārtotie komponenti šajā fāzē nepastāvēs, mēs nevaram piekļūt arī pakārtotajiem komponentiem.
- renderēt (): tiek renderēta ārējā fāze. Tiek renderēts vecākais komponents, un pēc tam tiks renderēts pakārtotais komponents, ja tāds pastāv. Pēc vecākelementa renderēšanas tas pāriet uz pakārtoto komponentu (konstruktoru, savienoto atzvanīšanu, renderēšanu) un veic tās pašas darbības kā vecākam.
- renderētsAtzvans (): Kad komponenta renderēšana ir pabeigta un pēc tam vēlaties veikt kādu darbību, šī metode tiek izsaukta.
- atvienots Atzvans (): šajā posmā elements tiek noņemts no DOM (pretēji connectcallback()).
- ErrorCallback() tiek izsaukts, kad dzīves ciklā rodas kļūda.
Connectedback() struktūra
Izmantojot savienoto atzvanīšanu ():
- Definējiet mainīgo un iestatiet īpašuma vērtību.
- Zvaniet uz Apex, kas atrodas tajā.
- Izveidojiet un nosūtiet pasākumus.
- UI API var izsaukt.
- Navigācijas pakalpojums tajā.
Tas ir jānorāda JavaScript failā šādi:
savienots Atzvans ( ) {
// dari...
}
Visos piemēros tiek izmantots šis “meta.xml” fails. Mēs to nenorādīsim katrā piemērā. LWC komponentus var pievienot jūsu ierakstu lapai, lietotņu lapai un sākumlapai.
versija = '1.0' ?>
< / mērķi>
< / LightningComponentBundle>
1. piemērs:
Mēs demonstrēsim konstruktora () un connectcallback () fāzi, kad komponents tiks ielādēts lietotāja saskarnē.
connectCallBack.html
< / zibens karte>
< / veidne>
connectCallBack.js
// Montāžas fāze — konstruktors()konstruktors ( ) {
super ( )
konsole. žurnāls ( 'konstruktors sauc' )
}
// Montāžas fāze — savienotsAtzvans()
savienots Atzvans ( ) {
konsole. žurnāls ( 'connected Callback call' )
}
Tas izskatās šādi:
Izvade:
Pievienojiet šo komponentu jebkura objekta lapai “Ierakstīt”.
Pārbaudiet lapu (noklikšķiniet pa kreisi un atlasiet “Pārbaudīt”). Pēc tam dodieties uz cilni “Konsole”.
2. piemērs:
Šajā piemērā mēs izveidosim augli ar sliežu ceļa noformētāju un iestatīsim rekvizīta vērtību uz “Mango”, izmantojot connectcallback() metodi. Tas tiek parādīts lietotāja saskarnē.
pirmaisPiemērs.html
< div klasē = 'slds-var-m-around_medium' >
< b > Augļa nosaukums: < / b > {augļi}
< / div >
< / zibens karte>
< / veidne>
pirmaisPiemērs.js
imports { ZibensElements , trase } no 'veiksme' ;eksportēt noklusējuma klasē PirmaisPiemērs pagarina ZibensElements {
@ izsekot augļus ;
savienots Atzvans ( ) {
// Īpašuma vērtības iestatīšana uz Mango
šis . augļus = 'Mango' ;
}
}
Izvade:
Pievienojiet šo komponentu jebkura objekta lapai “Ierakstīt”. Šeit mēs to pievienojam lapai “Konta ieraksts”. Jūs redzēsit, ka auglis ir 'Mango'.
3. piemērs:
Izmantojiet iepriekšējo kodu un modificējiet dažus paziņojumus failā “js” un “html”.
Izveidojiet jaunu mainīgo, kas ir “number” ar 500 “js” failā. Iestatiet auglim vērtību “lielāks par 500”, ja skaitlis ir lielāks par 500. Pretējā gadījumā iestatiet augļus kā “vienāds ar 500”.
pirmaisPiemērs.html
< div klasē = 'slds-var-m-around_medium' >
< b > Izmaksas: < / b > {augļi}
< / div >
< / zibens karte>
< / veidne>
pirmaisPiemērs.js
@ izsekot augļus ;savienots Atzvans ( ) {
let numurs = 500 ;
ja ( numuru > 500 ) {
šis . augļus = 'lielāks par 500' ;
}
cits {
šis . augļus = 'vienāds ar 500' ;
}
}
Izvade:
Skaitlis ir 500. Tātad auglim rezultāts ir “vienāds ar 500”.
4. piemērs:
Šajā scenārijā mēs atgriežam konta ierakstus (konta objektu), izmantojot connectcallback() metodi.
- Pirmkārt, mēs uzrakstām Apex klasi, kas atgriež pirmo 10 kontu sarakstu ar laukiem Id, Name, Industry un Rating.
- Pēc tam mēs izsekojam kontus un atgriežam tos, izmantojot connectcallback() metodi, izsaucot metodi no Apex klases.
- HTML failā mēs to izmantojam katrai direktīvai, kas atkārto kontus un atgriež nosaukumu un nozari.
AccountData.apxc
publisks ar koplietošanas klasi AccountData {@AuraEnabled(kešatmiņā saglabājama=true)
public static List
List
atgriezt kontuList;
}
}
secondExample.html
< div klasē = 'slds-var-m-around_medium' >
< lpp taustiņu = { account_rec. Id } >< b > Konts: < / b > {account_rec.Name} < b > Nozare: < / b > {account_rec.Industry} < / lpp >
< / veidne>
< / veidne>
< / div >
< / zibens karte>
< / veidne>
secondExample.js
Importējiet returnAcc no Apex klasē :imports returnAcc no '@salesforce/apex/AccountData.returnAcc' ;
Rakstiet šis kods “js” klasē :
@ izsekot kontiem ;
@ trases kļūda ;
savienots Atzvans ( ) {
returnAcc ( )
// Atgriezt kontus
. tad ( rezultāts => {
šis . kontiem = rezultāts ;
šis . kļūda = nenoteikts ;
} )
. noķert ( kļūda => {
šis . kļūda = kļūda ;
šis . kontiem = nenoteikts ;
} ) ;
}
Izvade:
Pirmie 10 konta ieraksti tiek atgriezti ar konta nosaukumu un nozari.
Secinājums
Tagad vairumā gadījumu varat izmantot Connectcallback() metodi, strādājot ar Apex datiem LWC. Šajā rokasgrāmatā mēs apspriedām, kā iestatīt īpašuma vērtību, izmantojot connectcallback(), un tajā iekļāvām Apex. Lai labāk izprastu, mēs vispirms sniedzām piemēru, kas parāda konstruktora () un connectcallback () metodes. Jums ir jāpārbauda sava tīmekļa lapa un jāskata tā konsolē.