Lightning Web Component (LWC) har sin egen livscykel för att infoga komponenten/komponenterna i DOM, rendera den och ta bort komponenten/komponenterna från DOM. ConnectedCallback() (i monteringsfasen) är en av LifeCycle-metoderna som aktiveras när komponenten infogas i DOM. I den här guiden kommer vi att diskutera connectioncallback() och de olika scenarierna som inkluderar denna metod med exempel.
- Konstruktorn() är den första metoden i Lifecycle-kroken som anropas när 'Component'-instansen skapas. Komponentegenskaperna i denna fas kommer inte att vara klara. Om du vill komma åt värdelementet måste vi använda 'this.template'. Eftersom de underordnade komponenterna i den här fasen inte kommer att existera kan vi inte heller komma åt de underordnade komponenterna. Super() används i denna metod.
- Connectedcallback() är den andra metoden (fas 2) som anropas när ett element infogas i DOM. I det här fallet flyter kroken från förälder till barn. Komponentegenskaperna i denna fas kommer inte att vara klara. Om du vill komma åt värdelementet måste vi använda 'this.template'. Eftersom de underordnade komponenterna i den här fasen inte kommer att existera kan vi inte heller komma åt de underordnade komponenterna.
- framställa (): Extfasen återges. Den överordnade komponenten renderas och sedan renderas den underordnade komponenten om den finns. Efter att ha renderat föräldern går den till den underordnade komponenten (konstruktör, connectedcallback, render) och följer samma steg som föräldern.
- återuppringning (): När renderingen av komponenten är klar och du vill utföra någon operation efter detta, anropas denna metod.
- frånkopplad Återuppringning (): I detta skede tas elementet bort från DOM (motsatsen till connectedcallback()).
- errorCallback() anropas när felet inträffar i livscykeln.
Connectedcallback() Struktur
Använda kopplad återuppringning():
- Definiera en variabel och ställ in ett egenskapsvärde.
- Ring Apex inuti den.
- Skapa och skicka händelserna.
- UI API kan anropas.
- Navigationstjänst inuti den.
Det måste anges i JavaScript-filen enligt följande:
ansluten Återuppringning ( ) {
// gör...
}
Alla exempel använder denna 'meta.xml'-fil. Vi kommer inte att specificera detta i varje exempel. LWC-komponenterna kan läggas till på din postsida, appsida och startsida.
version = '1.0' ?>
< / mål>
< / LightningComponentBundle>
Exempel 1:
Vi kommer att demonstrera constructor() och connectedcallback()-fasen när komponenten laddas på användargränssnittet.
connectedCallBack.html
< / blixtkort>
< / mall>
connectedCallBack.js
// Monteringsfas - konstruktor()konstruktör ( ) {
super ( )
trösta. logga ( 'konstruktör ringde' )
}
// Monteringsfas - connectedCallback()
ansluten Återuppringning ( ) {
trösta. logga ( 'connectedCallback ringde' )
}
Det ser ut som följande:
Produktion:
Lägg till den här komponenten på 'Record'-sidan för ett objekt.
Inspektera sidan (klicka till vänster och välj 'Inspektera'). Gå sedan till fliken 'Konsoll'.
Exempel 2:
I det här exemplet kommer vi att skapa en frukt med en spårdekoratör och sätta egenskapsvärdet till 'Mango' i metoden connectedcallback(). Detta visas i användargränssnittet.
firstExample.html
< div klass = 'slds-var-m-around_medium' >
< b > Fruktnamn: < / b > {frukt}
< / div >
< / blixtkort>
< / mall>
firstExample.js
importera { LightningElement , Spår } från 'tur' ;exportera standard klass Första exemplet sträcker sig LightningElement {
@ spåra frukt ;
ansluten Återuppringning ( ) {
// Ställer in egenskapsvärdet till Mango
detta . frukt = 'Mango' ;
}
}
Produktion:
Lägg till den här komponenten på 'Record'-sidan för ett objekt. Här lägger vi till det på sidan 'Kontoregister'. Du kommer att se att frukten är 'Mango'.
Exempel 3:
Använd den tidigare koden och ändra några påståenden i 'js'- och 'html'-filen.
Skapa en ny variabel som är 'nummer' med 500 i 'js'-filen. Ställ in frukten på 'större än 500' om siffran är större än 500. Annars ställer du in frukten som 'lika med 500'.
firstExample.html
< div klass = 'slds-var-m-around_medium' >
< b > Kosta: < / b > {frukt}
< / div >
< / blixtkort>
< / mall>
firstExample.js
@ spåra frukt ;ansluten Återuppringning ( ) {
låt nummer = 500 ;
om ( siffra > 500 ) {
detta . frukt = 'mer än 500' ;
}
annan {
detta . frukt = 'lika med 500' ;
}
}
Produktion:
Siffran är 500. Så frukten håller resultatet som 'lika med 500'.
Exempel 4:
I det här scenariot returnerar vi kontoposterna (Account-objekt) med metoden connectedcallback() .
- Först skriver vi en Apex-klass som returnerar listan över de första 10 kontona med fälten Id, Name, Industry och Rating
- Därefter spårar vi kontona och returnerar dem i metoden connectedcallback() genom att anropa metoden från Apex-klassen.
- I HTML-filen använder vi den för varje direktiv som itererar kontona och returnerar Namn och Bransch.
AccountData.apxc
offentlig med delningsklass AccountData {@AuraEnabled(cacheable=true)
offentlig statisk lista
List
returnera kontolista;
}
}
secondExample.html
< div klass = 'slds-var-m-around_medium' >
< sid nyckel = { account_rec. Id } >< b > Konto: < / b > {account_rec.Name} < b > Industri: < / b > {account_rec.Industry} < / sid >
< / mall>
< / mall>
< / div >
< / blixtkort>
< / mall>
secondExample.js
Importera returAcc från Apex klass :importera returnAcc från '@salesforce/apex/AccountData.returnAcc' ;
Skriva detta kod inom 'js' klass :
@ spåra konton ;
@ spårfel ;
ansluten Återuppringning ( ) {
returAcc ( )
// Returnera kontona
. sedan ( resultat => {
detta . konton = resultat ;
detta . fel = odefinierad ;
} )
. fånga ( fel => {
detta . fel = fel ;
detta . konton = odefinierad ;
} ) ;
}
Produktion:
De första 10 kontoposterna returneras med kontonamn och bransch.
Slutsats
Nu kan du använda metoden connectedcallback() i de flesta fall medan du arbetar med Apex-data i LWC. I den här guiden diskuterade vi hur man ställer in egenskapsvärdet med hjälp av connectedcallback() och inkluderade Apex i den. För bättre förståelse gav vi först ett exempel som visade metoderna constructor() och connectedcallback(). Du måste inspektera din webbsida och se den i konsolen.