Lightning Web Component (LWC) har sin egen livscyklus til at indsætte komponenten/komponenterne i DOM'en, gengive den og fjerne komponenten/komponenterne fra DOM'en. ConnectedCallback() (i monteringsfasen) er en af LifeCycle-metoderne, som udløses, når komponenten indsættes i DOM. I denne vejledning vil vi diskutere forbindelsescallback() og de forskellige scenarier, der inkluderer denne metode med eksempler.
- Konstruktøren() er den første metode i Lifecycle-hook, som kaldes, når 'Component'-instansen oprettes. Komponentegenskaberne i denne fase vil ikke være klar. Hvis du vil have adgang til værtselementet, skal vi bruge 'this.template'. Da de underordnede komponenter i denne fase ikke eksisterer, kan vi heller ikke få adgang til de underordnede komponenter. Super() bruges i denne metode.
- Connectedcallback() er den anden metode (fase 2), som kaldes, når et element indsættes i DOM. I dette tilfælde flyder krogen fra forælder til barn. Komponentegenskaberne i denne fase vil ikke være klar. Hvis du vil have adgang til værtselementet, skal vi bruge 'this.template'. Da de underordnede komponenter i denne fase ikke eksisterer, kan vi heller ikke få adgang til de underordnede komponenter.
- gengive (): Den eksterne fase gengiver. Den overordnede komponent gengives, og den underordnede komponent gengives, hvis den findes. Efter gengivelse af overordnet, går det til den underordnede komponent (konstruktør, tilsluttet tilbagekald, render) og følger de samme trin som forælderen.
- tilbagekaldt (): Når gengivelsen af komponenten er fuldført, og du ønsker at udføre en operation efter dette, kaldes denne metode.
- afbrudt Tilbagekald (): I dette trin fjernes elementet fra DOM (modsat forbundetcallback()).
- errorCallback() kaldes, når fejlen opstår i livscyklussen.
Connectedcallback()-struktur
Brug af det tilsluttede tilbagekald():
- Definer en variabel og indstil en egenskabsværdi.
- Ring til Apex inde i den.
- Opret og afsend begivenhederne.
- UI API kan kaldes.
- Navigationstjeneste inde i den.
Det skal angives i JavaScript-filen som følgende:
tilsluttet Tilbagekald ( ) {
// gør...
}
Alle eksemplerne bruger denne 'meta.xml' fil. Vi vil ikke specificere dette i hvert eksempel. LWC-komponenterne kan føjes til din optagelsesside, appside og startside.
version = '1.0' ?>
< / mål>
< / LightningComponentBundle>
Eksempel 1:
Vi vil demonstrere constructor() og connectedcallback()-fasen, når komponenten indlæses på brugergrænsefladen.
forbundetCallBack.html
< / lyn-kort>
< / skabelon>
forbundetCallBack.js
// Monteringsfase - konstruktør()konstruktør ( ) {
super ( )
konsol. log ( 'konstruktør kaldet' )
}
// Monteringsfase - forbundetCallback()
tilsluttet Tilbagekald ( ) {
konsol. log ( 'connectedCallback kaldet' )
}
Det ser ud som følgende:
Produktion:
Tilføj denne komponent til 'Record'-siden for ethvert objekt.
Undersøg siden (klik til venstre og vælg 'Inspicer'). Gå derefter til fanen 'Konsol'.
Eksempel 2:
I dette eksempel vil vi oprette en frugt med en spordekorator og sætte egenskabsværdien til 'Mango' inde i connectedcallback()-metoden. Dette vises på brugergrænsefladen.
firstExample.html
< div klasse = 'slds-var-m-around_medium' >
< b > Frugt navn: < / b > {frugt}
< / div >
< / lyn-kort>
< / skabelon>
firstExample.js
importere { LightningElement , spore } fra 'held' ;eksport Standard klasse Førsteeksempel strækker sig LightningElement {
@ spor frugt ;
tilsluttet Tilbagekald ( ) {
// Indstilling af egenskabsværdien til Mango
det her . frugt = 'Mango' ;
}
}
Produktion:
Tilføj denne komponent til 'Record'-siden for ethvert objekt. Her tilføjer vi det til siden 'Kontoregistrering'. Du vil se, at frugten er 'Mango'.
Eksempel 3:
Brug den forrige kode og modificer nogle udsagn i 'js'- og 'html'-filen.
Opret en ny variabel, som er 'nummer' med 500 i 'js'-filen. Indstil frugten til 'større end 500', hvis tallet er større end 500. Ellers skal du indstille frugten til 'lig med 500'.
firstExample.html
< div klasse = 'slds-var-m-around_medium' >
< b > Koste: < / b > {frugt}
< / div >
< / lyn-kort>
< / skabelon>
firstExample.js
@ spor frugt ;tilsluttet Tilbagekald ( ) {
lad nummer = 500 ;
hvis ( nummer > 500 ) {
det her . frugt = 'større end 500' ;
}
andet {
det her . frugt = 'lig med 500' ;
}
}
Produktion:
Tallet er 500. Så frugten holder resultatet som 'lig med 500'.
Eksempel 4:
I dette scenarie returnerer vi kontoposterne (Account-objekt) ved hjælp af connectedcallback()-metoden.
- Først skriver vi en Apex-klasse, der returnerer listen over de første 10 konti med felterne Id, Name, Industry og Rating
- Dernæst sporer vi konti og returnerer dem i connectedcallback()-metoden ved at kalde metoden fra Apex-klassen.
- I HTML-filen bruger vi den til hvert direktiv, der itererer konti og returnerer Navn og Branche.
AccountData.apxc
offentlig med deling af klassen AccountData {@AuraEnabled(cacheable=true)
offentlig statisk liste
List
returnere kontoliste;
}
}
secondExample.html
< div klasse = 'slds-var-m-around_medium' >
< s nøgle = { account_rec. Id } >< b > Konto: < / b > {account_rec.Name} < b > Industri: < / b > {account_rec.Industry} < / s >
< / skabelon>
< / skabelon>
< / div >
< / lyn-kort>
< / skabelon>
secondExample.js
Importer returAcc'en fra Apex klasse :importere returAcc fra '@salesforce/apex/AccountData.returnAcc' ;
Skrive det her kode i 'js' klasse :
@ spore konti ;
@ sporfejl ;
tilsluttet Tilbagekald ( ) {
returAcc ( )
// Returner regnskabet
. derefter ( resultat => {
det her . regnskaber = resultat ;
det her . fejl = udefineret ;
} )
. fangst ( fejl => {
det her . fejl = fejl ;
det her . regnskaber = udefineret ;
} ) ;
}
Produktion:
De første 10 kontoposter returneres med kontonavn og branche.
Konklusion
Nu kan du bruge metoden connectedcallback() i de fleste tilfælde, mens du arbejder med Apex-data i LWC. I denne vejledning diskuterede vi, hvordan man indstiller egenskabsværdien ved hjælp af connectedcallback() og inkluderede Apex i den. For bedre forståelse gav vi først et eksempel, der viste constructor()- og connectedcallback()-metoderne. Du skal inspicere din webside og se den i konsollen.