Lightning Web Component (LWC) har sin egen livssyklus for å sette inn komponenten/komponentene i DOM, gjengi den og fjerne komponenten/komponentene fra DOM. ConnectedCallback() (i monteringsfasen) er en av LifeCycle-metodene som utløses når komponenten settes inn i DOM. I denne veiledningen vil vi diskutere forbindelsencallback() og de forskjellige scenariene som inkluderer denne metoden med eksempler.
- Konstruktøren() er den første metoden i Lifecycle-kroken som kalles når 'Component'-forekomsten opprettes. Komponentegenskapene i denne fasen vil ikke være klare. Hvis du vil ha tilgang til vertselementet, må vi bruke 'this.template'. Siden de underordnede komponentene i denne fasen ikke eksisterer, har vi ikke tilgang til underkomponentene også. Super() brukes i denne metoden.
- Connectedcallback() er den andre metoden (fase 2) som kalles når et element settes inn i DOM. I dette tilfellet flyter kroken fra forelder til barn. Komponentegenskapene i denne fasen vil ikke være klare. Hvis du vil ha tilgang til vertselementet, må vi bruke 'this.template'. Siden de underordnede komponentene i denne fasen ikke eksisterer, har vi ikke tilgang til underkomponentene også.
- gjengi (): Den eksterne fasen gjengir. Den overordnede komponenten gjengis, og deretter vil den underordnede komponenten gjengis hvis den eksisterer. Etter å ha gjengitt den overordnede, går den til den underordnede komponenten (konstruktør, koblet tilbakeringing, gjengivelse) og følger de samme trinnene som den overordnede.
- gjengitt Tilbakeringing (): Når gjengivelsen av komponenten er fullført og du ønsker å utføre en operasjon etter dette, kalles denne metoden.
- frakoblet Tilbakeringing (): I dette stadiet fjernes elementet fra DOM (motsatt til connectedcallback()).
- errorCallback() kalles når feilen oppstår i livssyklusen.
Connectedcallback()-struktur
Ved hjelp av koblet tilbakeringing():
- Definer en variabel og angi en egenskapsverdi.
- Ring Apex inne i den.
- Opprett og send hendelsene.
- UI API kan kalles.
- Navigasjonstjeneste inne i den.
Det må spesifiseres i JavaScript-filen slik:
tilkoblet Tilbakeringing ( ) {
// gjør...
}
Alle eksemplene bruker denne 'meta.xml'-filen. Vi vil ikke spesifisere dette i hvert eksempel. LWC-komponentene kan legges til Record Page, App Page og Home Page.
versjon = '1.0' ?>
< / mål>
< / LightningComponentBundle>
Eksempel 1:
Vi vil demonstrere konstruktøren() og connectedcallback()-fasen når komponenten er lastet inn på brukergrensesnittet.
kobletCallBack.html
< / lyn-kort>
< / mal>
kobletCallBack.js
// Monteringsfase - konstruktør()konstruktør ( ) {
super ( )
konsoll. Logg ( 'konstruktør kalt' )
}
// Monteringsfase - connectedCallback()
tilkoblet Tilbakeringing ( ) {
konsoll. Logg ( 'connectedCallback ringte' )
}
Det ser ut som følgende:
Produksjon:
Legg til denne komponenten på 'Record'-siden til ethvert objekt.
Inspiser siden (klikk til venstre og velg 'Inspiser'). Gå deretter til fanen 'Konsoll'.
Eksempel 2:
I dette eksemplet vil vi lage en frukt med en spordekorator og sette egenskapsverdien til 'Mango' i connectedcallback()-metoden. Dette vises på brukergrensesnittet.
firstExample.html
< div klasse = 'slds-var-m-around_medium' >
< b > Frukt navn: < / b > {frukt}
< / div >
< / lyn-kort>
< / mal>
firstExample.js
import { LightningElement , spor } fra 'flaks' ;eksport misligholde klasse Førsteeksempel strekker LightningElement {
@ spor frukt ;
tilkoblet Tilbakeringing ( ) {
// Sette egenskapsverdien til Mango
dette . frukt = 'Mango' ;
}
}
Produksjon:
Legg til denne komponenten på 'Record'-siden til ethvert objekt. Her legger vi den til på siden 'Kontopost'. Du vil se at frukten er 'Mango'.
Eksempel 3:
Bruk den forrige koden og endre noen utsagn i 'js' og 'html' filen.
Lag en ny variabel som er 'nummer' med 500 i 'js'-filen. Sett frukten til «større enn 500» hvis tallet er større enn 500. Ellers setter du frukten til «lik 500».
firstExample.html
< div klasse = 'slds-var-m-around_medium' >
< b > Koste: < / b > {frukt}
< / div >
< / lyn-kort>
< / mal>
firstExample.js
@ spor frukt ;tilkoblet Tilbakeringing ( ) {
la nummer = 500 ;
hvis ( Antall > 500 ) {
dette . frukt = 'større enn 500' ;
}
ellers {
dette . frukt = 'lik 500' ;
}
}
Produksjon:
Tallet er 500. Så frukten holder resultatet som 'lik 500'.
Eksempel 4:
I dette scenariet returnerer vi kontopostene (Account-objektet) ved hjelp av connectedcallback()-metoden.
- Først skriver vi en Apex-klasse som returnerer listen over de første 10 kontoene med feltene Id, Name, Industry og Rating
- Deretter sporer vi kontoene og returnerer dem i connectedcallback()-metoden ved å kalle metoden fra Apex-klassen.
- I HTML-filen bruker vi den for hvert direktiv som itererer kontoene og returnerer navn og industri.
AccountData.apxc
offentlig med deling av klassen AccountData {@AuraEnabled(cacheable=true)
offentlig statisk liste
List
returnere kontoliste;
}
}
secondExample.html
< div klasse = 'slds-var-m-around_medium' >
< s nøkkel = { account_rec. ID } >< b > Regnskap: < / b > {account_rec.Name} < b > Industri: < / b > {account_rec.Industry} < / s >
< / mal>
< / mal>
< / div >
< / lyn-kort>
< / mal>
secondExample.js
Importer returAcc fra Apex klasse :import returnAcc fra '@salesforce/apex/AccountData.returnAcc' ;
Skrive dette kode i 'js' klasse :
@ spore kontoer ;
@ sporfeil ;
tilkoblet Tilbakeringing ( ) {
returAkk ( )
// Returner regnskapet
. deretter ( resultat => {
dette . kontoer = resultat ;
dette . feil = udefinert ;
} )
. å fange ( feil => {
dette . feil = feil ;
dette . kontoer = udefinert ;
} ) ;
}
Produksjon:
De første 10 kontopostene returneres med kontonavn og bransje.
Konklusjon
Nå kan du bruke connectedcallback()-metoden i de fleste tilfeller mens du arbeider med Apex-data i LWC. I denne veiledningen diskuterte vi hvordan du angir egenskapsverdien ved å bruke connectedcallback() og inkluderte Apex i den. For bedre forståelse ga vi først et eksempel som viste constructor()- og connectedcallback()-metodene. Du må inspisere nettsiden din og se den i konsollen.