Lightning Web Componentilla (LWC) on oma elinkaari, jolla komponentit lisätään DOM:iin, renderöidään ja poistetaan komponentit DOM:sta. ConnectCallback() (asennusvaiheessa) on yksi LifeCycle-menetelmistä, joka käynnistyy, kun komponentti asetetaan DOM:iin. Tässä oppaassa käsittelemme connectcallback()-toimintoa ja erilaisia skenaarioita, jotka sisältävät tämän menetelmän esimerkkien kanssa.
- Constructor() on ensimmäinen menetelmä Lifecycle Hookissa, jota kutsutaan, kun 'komponentti'-instanssi luodaan. Tämän vaiheen komponenttien ominaisuudet eivät ole valmiita. Jos haluat käyttää isäntäelementtiä, meidän on käytettävä 'this.template'. Koska tämän vaiheen alikomponentteja ei ole olemassa, emme myöskään voi käyttää alikomponentteja. Tässä menetelmässä käytetään Super():ta.
- Connectcallback() on toinen menetelmä (vaihe 2), jota kutsutaan, kun elementti lisätään DOM:iin. Tässä tapauksessa koukku virtaa vanhemmalta lapselle. Tämän vaiheen komponenttien ominaisuudet eivät ole valmiita. Jos haluat käyttää isäntäelementtiä, meidän on käytettävä 'this.template'. Koska tämän vaiheen alikomponentteja ei ole olemassa, emme myöskään voi käyttää alikomponentteja.
- renderöidä (): Seuraava vaihe hahmonnetaan. Pääkomponentti hahmonnetaan ja sitten alikomponentti hahmonnetaan, jos se on olemassa. Yläosan hahmontamisen jälkeen se siirtyy alikomponenttiin (konstruktori, kytketty takaisinsoitto, renderöinti) ja noudattaa samoja vaiheita kuin pääkomponentti.
- renderöity takaisinsoitto (): Kun komponentin renderöinti on valmis ja haluat suorittaa minkä tahansa toiminnon tämän jälkeen, tätä menetelmää kutsutaan.
- katkaistu takaisinsoitto (): Tässä vaiheessa elementti poistetaan DOM:sta (vastakohta Connectcallback()).
- ErrorCallback() kutsutaan, kun virhe ilmenee LifeCyclessä.
Connectedcallback() -rakenne
Kytketty takaisinsoitto():
- Määritä muuttuja ja aseta ominaisuuden arvo.
- Soita sen sisällä olevalle Apexille.
- Luo ja lähetä tapahtumat.
- UI API voidaan kutsua.
- Navigointipalvelu sen sisällä.
Se on määritettävä JavaScript-tiedostossa seuraavasti:
yhdistetty takaisinsoitto ( ) {
// tee…
}
Kaikki esimerkit käyttävät tätä 'meta.xml' -tiedostoa. Emme määrittele tätä jokaisessa esimerkissä. LWC-komponentit voidaan lisätä tietuesivullesi, sovellussivullesi ja kotisivullesi.
versio = '1.0' ?>
< / tavoitteet>
< / LightningComponentBundle>
Esimerkki 1:
Esittelemme constructor()- ja connectcallback()-vaiheen, kun komponentti ladataan käyttöliittymään.
kytkettyCallBack.html
< / salamakortti>
< / malli>
kytkettyCallBack.js
// Asennusvaihe - konstruktori()rakentaja ( ) {
super ( )
konsoli. Hirsi ( 'rakentaja nimeltä' )
}
// Asennusvaihe - kytkettyCallback()
yhdistetty takaisinsoitto ( ) {
konsoli. Hirsi ( 'connectedCallback called' )
}
Se näyttää seuraavalta:
Lähtö:
Lisää tämä komponentti minkä tahansa objektin 'Record'-sivulle.
Tarkista sivu (klikkaa vasenta ja valitse 'Tarkista'). Siirry sitten 'Konsoli'-välilehteen.
Esimerkki 2:
Tässä esimerkissä luomme hedelmän raidan koristelulla ja asetamme ominaisuuden arvoksi 'Mango' connectcallback()-metodissa. Tämä näkyy käyttöliittymässä.
firstExample.html
< div luokkaa = 'slds-var-m-around_medium' >
< b > Hedelmän nimi: < / b > {hedelmä}
< / div >
< / salamakortti>
< / malli>
firstExample.js
tuonti { Salamaelementti , seurata } alkaen 'onnea' ;viedä oletuksena luokkaa Ensimmäinen Esimerkki ulottuu Salamaelementti {
@ seurata hedelmiä ;
yhdistetty takaisinsoitto ( ) {
// Asetetaan ominaisuuden arvoksi Mango
Tämä . hedelmää = 'Mango' ;
}
}
Lähtö:
Lisää tämä komponentti minkä tahansa objektin 'Record'-sivulle. Täällä lisäämme sen 'Tilitietue' -sivulle. Näet, että hedelmä on 'Mango'.
Esimerkki 3:
Käytä aiempaa koodia ja muokkaa joitain lauseita 'js'- ja 'html'-tiedostoissa.
Luo uusi muuttuja, joka on 'number' ja 500 'js'-tiedostoon. Aseta hedelmä arvoon 'suurempi kuin 500', jos luku on suurempi kuin 500. Muussa tapauksessa aseta hedelmäksi 'yhtä kuin 500'.
firstExample.html
< div luokkaa = 'slds-var-m-around_medium' >
< b > Kustannus: < / b > {hedelmä}
< / div >
< / salamakortti>
< / malli>
firstExample.js
@ seurata hedelmiä ;yhdistetty takaisinsoitto ( ) {
anna numero = 500 ;
jos ( määrä > 500 ) {
Tämä . hedelmää = 'yli 500' ;
}
muu {
Tämä . hedelmää = 'vastaa 500' ;
}
}
Lähtö:
Luku on 500. Joten hedelmä pitää tuloksena 'yhtä kuin 500'.
Esimerkki 4:
Tässä skenaariossa palautamme tilitietueet (Account object) Connectcallback()-menetelmällä.
- Ensin kirjoitamme Apex-luokan, joka palauttaa luettelon ensimmäisistä 10 tilistä ID-, Name-, Industry- ja Rating-kentillä.
- Seuraavaksi seuraamme tilejä ja palautamme ne connectcallback()-metodissa kutsumalla metodia Apex-luokasta.
- HTML-tiedostossa käytämme sitä jokaisessa direktiivissä, joka iteroi tilejä ja palauttaa nimen ja toimialan.
AccountData.apxc
julkinen jakamalla luokan AccountData {@AuraEnabled(välimuistissa = tosi)
julkinen static List
List
palauttaa tililuettelo;
}
}
toinenEsimerkki.html
< div luokkaa = 'slds-var-m-around_medium' >
< s avain = { account_rec. Id } >< b > Tili: < / b > {account_rec.Name} < b > Ala: < / b > {account_rec.Toimiala} < / s >
< / malli>
< / malli>
< / div >
< / salamakortti>
< / malli>
secondExample.js
Tuo returnAcc Apexista luokkaa :tuonti returnAcc alkaen '@salesforce/apex/AccountData.returnAcc' ;
Kirjoittaa Tämä koodi 'js' sisällä luokkaa :
@ seurata tilejä ;
@ jäljitysvirhe ;
yhdistetty takaisinsoitto ( ) {
returnAcc ( )
// Palauta tilit
. sitten ( tulos => {
Tämä . tilit = tulos ;
Tämä . virhe = määrittelemätön ;
} )
. ottaa kiinni ( virhe => {
Tämä . virhe = virhe ;
Tämä . tilit = määrittelemätön ;
} ) ;
}
Lähtö:
Ensimmäiset 10 tilitietuetta palautetaan tilin nimellä ja toimialalla.
Johtopäätös
Nyt voit käyttää connectcallback()-menetelmää useimmissa tapauksissa työskennellessäsi Apex-tietojen kanssa LWC:ssä. Tässä oppaassa keskustelimme ominaisuuden arvon asettamisesta Connectcallback()-toiminnolla ja sisällytimme siihen Apexin. Paremman ymmärtämisen vuoksi annoimme ensin esimerkin, joka osoitti constructor()- ja connectcallback()-menetelmät. Sinun on tarkastettava verkkosivusi ja tarkasteltava sitä konsolissa.