Lightning Web Componentil (LWC) on oma elutsükkel, mis võimaldab komponendid DOM-i lisada, renderdada ja komponente DOM-ist eemaldada. ConnectCallback() (paigaldusfaasis) on üks LifeCycle'i meetoditest, mis käivitatakse komponendi DOM-i sisestamisel. Selles juhendis käsitleme koos näidetega funktsiooni Connectcallback() ja erinevaid stsenaariume, mis seda meetodit sisaldavad.
- Konstruktor() on elutsükli konksu esimene meetod, mida kutsutakse välja eksemplari 'Component' loomisel. Selle faasi komponendi omadused ei ole valmis. Kui soovite pääseda juurde hostelemendile, peame kasutama 'this.template'. Kuna selle faasi alamkomponente ei eksisteeri, ei pääse me juurde ka alamkomponentidele. Selles meetodis kasutatakse Super().
- Connectcallback() on teine meetod (2. faas), mida kutsutakse välja, kui element sisestatakse DOM-i. Sellisel juhul voolab konks vanemalt lapsele. Selle faasi komponendi omadused ei ole valmis. Kui soovite pääseda juurde hostelemendile, peame kasutama 'this.template'. Kuna selle faasi alamkomponente ei eksisteeri, ei pääse me juurde ka alamkomponentidele.
- renderdama (): välimine faas renderdatakse. Ülemkomponent renderdatakse ja seejärel renderdatakse alamkomponent, kui see on olemas. Pärast vanema renderdamist läheb see alamkomponendi juurde (konstruktor, ühendatud tagasikutse, renderdus) ja järgib samu samme, mis ülemkomponent.
- renderdatud Tagasihelistamine (): Kui komponendi renderdamine on lõpetatud ja soovite pärast seda teha mis tahes toimingu, kutsutakse see meetod välja.
- katkestatud Tagasihelistamine (): selles etapis eemaldatakse element DOM-ist (vastandina ühendatud tagasihelistamisele()).
- ErrorCallback() kutsutakse välja, kui viga ilmneb elutsüklis.
Ühendatud tagasihelistamise() struktuur
Kasutades ühendatud tagasihelistamist ():
- Määratlege muutuja ja määrake atribuudi väärtus.
- Helista selle sees olevale Apexile.
- Looge ja saatke sündmusi.
- UI API saab kutsuda.
- Navigeerimisteenus selle sees.
See tuleb JavaScripti failis määrata järgmiselt:
ühendatud tagasihelistamine ( ) {
// tee…
}
Kõik näited kasutavad seda 'meta.xml' faili. Me ei täpsusta seda igas näites. LWC komponente saab lisada oma salvestuslehele, rakenduste lehele ja avalehele.
versioon = '1.0' ?>
< / sihtmärgid>
< / LightningComponentBundle>
Näide 1:
Kui komponent laaditakse kasutajaliidesele, demonstreerime konstruktori () ja ühendatud tagasihelistamise () faasi.
ühendatudCallBack.html
< / välk-kaart>
< / mall>
ühendatudCallBack.js
// Paigaldusfaas – konstruktor()konstruktor ( ) {
Super ( )
konsool. logi ( 'konstruktor kutsus' )
}
// Paigaldusfaas – ühendatud Callback()
ühendatud tagasihelistamine ( ) {
konsool. logi ( 'connectedCallback callis' )
}
See näeb välja järgmine:
Väljund:
Lisage see komponent mis tahes objekti lehele 'Salvesta'.
Kontrollige lehte (klõpsake vasakule ja valige 'Inspekteeri'). Seejärel minge vahekaardile 'Konsool'.
Näide 2:
Selles näites loome rajadekoraatoriga puuvilja ja määrame atribuudi väärtuseks 'Mango' meetodi connectcallback() sees. See kuvatakse kasutajaliideses.
firstExample.html
< div klass = 'slds-var-m-around_medium' >
< b > Puuvilja nimi: < / b > {puuvili}
< / div >
< / välk-kaart>
< / mall>
firstExample.js
importida { Välguelement , rada } alates 'õnn' ;eksportida vaikimisi klass Esimene Näide ulatub Välguelement {
@ jälgi vilja ;
ühendatud tagasihelistamine ( ) {
// Atribuudi väärtuse määramine Mango
see . puuvilju = 'Mango' ;
}
}
Väljund:
Lisage see komponent mis tahes objekti lehele 'Salvesta'. Siin lisame selle lehele 'Kontokirje'. Näete, et puu on 'Mango'.
Näide 3:
Kasutage eelmist koodi ja muutke mõningaid avaldusi 'js' ja 'html' failis.
Looge failis 'js' uus muutuja, mis on 'number' ja 500. Kui see arv on suurem kui 500, määrake viljaks 'suurem kui 500'. Muul juhul määrake puuviljaks 'võrdne 500ga'.
firstExample.html
< div klass = 'slds-var-m-around_medium' >
< b > Maksumus: < / b > {puuvili}
< / div >
< / välk-kaart>
< / mall>
firstExample.js
@ jälgi vilja ;ühendatud tagasihelistamine ( ) {
lase number = 500 ;
kui ( number > 500 ) {
see . puuvilju = 'üle 500' ;
}
muidu {
see . puuvilju = 'võrdne 500-ga' ;
}
}
Väljund:
Arv on 500. Seega jääb viljale tulemuseks 'võrdne 500-ga'.
Näide 4:
Selle stsenaariumi korral tagastame kontokirjed (kontoobjekt), kasutades ühendatud callback() meetodit.
- Esiteks kirjutame Apexi klassi, mis tagastab esimese 10 konto loendi väljadega Id, Name, Industry ja Rating
- Järgmisena jälgime kontosid ja tagastame need ühendatud callback() meetodil, kutsudes välja meetodi Apex klassist.
- HTML-failis kasutame seda iga direktiivi jaoks, mis kordab kontosid ja tagastab nime ja valdkonna.
AccountData.apxc
avalik jagamisklassiga AccountData {@AuraEnabled(vahemällu salvestatav=true)
public static List
List
tagasta kontoloend;
}
}
secondExample.html
< div klass = 'slds-var-m-around_medium' >
< lk võti = { account_rec. Id } >< b > Konto: < / b > {account_rec.Name} < b > Tööstusharu: < / b > {account_rec.Tööstus} < / lk >
< / mall>
< / mall>
< / div >
< / välk-kaart>
< / mall>
secondExample.js
Importige Apexist returnAcc klass :importida returnAcc alates „@salesforce/apex/AccountData.returnAcc” ;
Kirjutage see kood 'js' sees klass :
@ kontode jälgimine ;
@ raja viga ;
ühendatud tagasihelistamine ( ) {
returnAcc ( )
// Tagasta kontod
. siis ( tulemus => {
see . kontosid = tulemus ;
see . viga = määratlemata ;
} )
. püüda ( viga => {
see . viga = viga ;
see . kontosid = määratlemata ;
} ) ;
}
Väljund:
Esimesed 10 kontokirjet tagastatakse koos konto nime ja tegevusalaga.
Järeldus
Nüüd saate LWC-s Apexi andmetega töötades enamikul juhtudel kasutada meetodit Connectcallback(). Selles juhendis arutasime atribuudi väärtuse seadistamist, kasutades Connectcallback() ja lisasime sellesse Apexi. Parema mõistmise huvides esitasime esmalt näite, mis näitas meetodeid konstruktor() ja connectcallback(). Peate oma veebilehte üle vaatama ja seda konsoolis vaatama.