A Lightning Web Component (LWC) saját életciklussal rendelkezik az összetevő(k) DOM-ba történő beillesztésére, renderelésére és az összetevő(k) DOM-ból való eltávolítására. A csatlakoztatott Callback() (a szerelési fázisban) az egyik LifeCycle metódus, amely akkor aktiválódik, amikor az összetevőt behelyezik a DOM-ba. Ebben az útmutatóban példákkal tárgyaljuk a connectcallback()-et és a különböző forgatókönyveket, amelyek ezt a módszert tartalmazzák.
- A constructor() az első metódus az Életciklus hook-ban, amely az „összetevő” példány létrehozásakor hívódik meg. Az összetevő tulajdonságai ebben a fázisban nem lesznek készen. Ha hozzá akarunk férni a host elemhez, a „this.template”-t kell használnunk. Mivel a gyermekkomponensek ebben a fázisban nem léteznek, nem férhetünk hozzá a gyermekkomponensekhez sem. Ebben a módszerben a Super()-t használjuk.
- A connectcallback() a második metódus (2. fázis), amelyet akkor hívunk meg, ha egy elemet beszúrunk a DOM-ba. Ebben az esetben a horog a szülőről a gyermekre folyik. Az összetevő tulajdonságai ebben a fázisban nem lesznek készen. Ha hozzá akarunk férni a host elemhez, a „this.template”-t kell használnunk. Mivel a gyermekkomponensek ebben a fázisban nem léteznek, nem férhetünk hozzá a gyermekkomponensekhez sem.
- Vakol (): A külső fázis renderelés alatt áll. A szülőkomponens renderelésre kerül, majd az utódkomponens, ha létezik. A szülő renderelése után a gyermekkomponenshez (konstruktor, csatlakoztatott visszahívás, render) megy, és ugyanazokat a lépéseket követi, mint a szülő.
- renderelt Visszahívás (): Amikor a komponens renderelése befejeződött, és ezt követően bármilyen műveletet szeretne végrehajtani, ez a metódus meghívásra kerül.
- lekapcsolt Visszahívás (): Ebben a szakaszban az elem eltávolításra kerül a DOM-ból (ellentétben a connectcallback()-vel).
- Az errorCallback() akkor kerül meghívásra, amikor a hiba előfordul az életciklusban.
Connectedcallback() Struktúra
A csatlakoztatott visszahívás() használatával:
- Határozzon meg egy változót és állítsa be a tulajdonság értékét.
- Hívd a benne lévő Apexet.
- Hozza létre és küldje el az eseményeket.
- Az UI API meghívható.
- Navigációs szolgáltatás benne.
Ezt a következőképpen kell megadni a JavaScript fájlban:
csatlakoztatva Visszahívás ( ) {
// csináld…
}
Az összes példa ezt a „meta.xml” fájlt használja. Ezt nem minden példában határozzuk meg. Az LWC összetevők hozzáadhatók a rekordoldalhoz, az alkalmazásoldalhoz és a kezdőlaphoz.
változat = '1.0' ?>
< / célpontok>
< / LightningComponentBundle>
1. példa:
Bemutatjuk a konstruktor() és a connectcallback() fázist, amikor a komponens betöltődik a felhasználói felületre.
connectCallBack.html
< / villámkártya>
< / sablon>
connectCallBack.js
// Szerelési fázis - konstruktor()konstruktőr ( ) {
szuper ( )
konzol. log ( 'építőt hívtak' )
}
// Szerelési fázis - csatlakoztatottCallback()
csatlakoztatva Visszahívás ( ) {
konzol. log ( 'kapcsolt visszahívás hívva' )
}
A következőképpen néz ki:
Kimenet:
Adja hozzá ezt az összetevőt bármely objektum „Rekord” oldalához.
Vizsgálja meg az oldalt (kattintson balra, és válassza az „Ellenőrzés” lehetőséget). Ezután lépjen a „Konzol” fülre.
2. példa:
Ebben a példában egy gyümölcsöt fogunk létrehozni egy pályadekorátorral, és a tulajdonság értékét „Mango”-ra állítjuk a connectcallback() metóduson belül. Ez megjelenik a felhasználói felületen.
firstExample.html
< div osztály = 'slds-var-m-around_medium' >
< b > Gyümölcs neve: < / b > {gyümölcs}
< / div >
< / villámkártya>
< / sablon>
firstExample.js
import { Villámelem , nyomon követni } tól től 'szerencse' ;export alapértelmezett osztály Első példa kiterjed Villámelem {
@ pálya gyümölcs ;
csatlakoztatva Visszahívás ( ) {
// A tulajdonság értékének beállítása Mango-ra
ez . gyümölcs = 'Mangó' ;
}
}
Kimenet:
Adja hozzá ezt az összetevőt bármely objektum „Rekord” oldalához. Itt hozzáadjuk a „Számlanyilvántartás” oldalhoz. Látni fogja, hogy a gyümölcs „Mango”.
3. példa:
Használja az előző kódot, és módosítson néhány utasítást a „js” és „html” fájlban.
Hozzon létre egy új változót, amely „szám” 500-zal a „js” fájlban. Állítsa a gyümölcsöt „500-nál nagyobb” értékre, ha a szám nagyobb, mint 500. Ellenkező esetben állítsa a gyümölcsöt „500-zal egyenlő” értékre.
firstExample.html
< div osztály = 'slds-var-m-around_medium' >
< b > Költség: < / b > {gyümölcs}
< / div >
< / villámkártya>
< / sablon>
firstExample.js
@ pálya gyümölcs ;csatlakoztatva Visszahívás ( ) {
legyen szám = 500 ;
ha ( szám > 500 ) {
ez . gyümölcs = '500-nál nagyobb' ;
}
más {
ez . gyümölcs = 'egyenlő 500' ;
}
}
Kimenet:
A szám 500. Tehát a gyümölcs „egyenlő 500-zal” tartja az eredményt.
4. példa:
Ebben a forgatókönyvben visszaadjuk a fiókrekordokat (Account objektum) a connectcallback() metódussal.
- Először írunk egy Apex osztályt, amely visszaadja az első 10 fiók listáját az Id, Name, Industry és Rating mezőkkel.
- Ezután nyomon követjük a fiókokat, és visszaküldjük őket a connectcallback() metódusban az Apex osztály metódusának meghívásával.
- A HTML-fájlban ezt használjuk minden olyan direktívához, amely megismétli a fiókokat, és visszaadja a nevet és az iparágat.
AccountData.apxc
nyilvános az osztály megosztásával AccountData {@AuraEnabled(gyorsítótárazható=igaz)
public static List
List
visszatérési számlalista;
}
}
másodikPélda.html
< div osztály = 'slds-var-m-around_medium' >
< p kulcs = { account_rec. Id } >< b > Fiók: < / b > {account_rec.Name} < b > Ipar: < / b > {account_rec.Industry} < / p >
< / sablon>
< / sablon>
< / div >
< / villámkártya>
< / sablon>
secondExample.js
Importálja a returnAcc-t az Apex-ből osztály :import returnAcc from '@salesforce/apex/AccountData.returnAcc' ;
Ír ez kód a „js”-en belül osztály :
@ számlák nyomon követése ;
@ nyomvonal hiba ;
csatlakoztatva Visszahívás ( ) {
returnAcc ( )
// A számlák visszaadása
. akkor ( eredmény => {
ez . fiókok = eredmény ;
ez . hiba = határozatlan ;
} )
. fogás ( hiba => {
ez . hiba = hiba ;
ez . fiókok = határozatlan ;
} ) ;
}
Kimenet:
Az első 10 számlarekord a számlanévvel és az ágazattal együtt kerül visszaküldésre.
Következtetés
Mostantól a legtöbb esetben használhatja a connectcallback() metódust, miközben Apex-adatokkal dolgozik LWC-ben. Ebben az útmutatóban megbeszéltük, hogyan állíthatjuk be a tulajdonság értékét a connectcallback() használatával, és belefoglaltuk az Apex-et is. A jobb megértés érdekében először bemutattunk egy példát, amely bemutatta a constructor() és a connectcallback() metódusokat. Meg kell vizsgálnia a weboldalt, és meg kell tekintenie a konzolon.