LWC – ConnectedCallback()

Lwc Connectedcallback



Lightning Web Component (LWC) ima vlastiti životni ciklus za umetanje komponente u DOM, renderiranje i uklanjanje komponente iz DOM-a. ConnectedCallback() (u  fazi montiranja) jedna je od metoda životnog ciklusa koja se pokreće kada se komponenta umetne u DOM. U ovom ćemo vodiču raspravljati o connectioncallback() i različitim scenarijima koji uključuju ovu metodu s primjerima.

  1. Constructor() je prva metoda u kuki životnog ciklusa koja se poziva kada se kreira instanca 'Component'. Svojstva komponente u ovoj fazi neće biti spremna. Ako želite pristupiti elementu hosta, moramo koristiti “this.template”. Kako podređene komponente u ovoj fazi neće postojati, ne možemo pristupiti niti podređenim komponentama. Super() se koristi u ovoj metodi.
  2. Connectedcallback() je druga metoda (faza 2) koja se poziva kada se element umetne u DOM. U ovom slučaju, udica teče od roditelja do djeteta. Svojstva komponente u ovoj fazi neće biti spremna. Ako želite pristupiti elementu hosta, moramo koristiti “this.template”. Kako podređene komponente u ovoj fazi neće postojati, ne možemo pristupiti niti podređenim komponentama.
  3. prikazati (): Ext faza je renderiranje. Nadređena komponenta se renderira, a potom će se renderirati podređena komponenta ako postoji. Nakon renderiranja nadređenog, odlazi na podređenu komponentu (konstruktor,connectedcallback, iscrtavanje) i slijedi iste korake kao roditelj.
  4. renderedCallback (): Kada je renderiranje komponente dovršeno i nakon toga želite izvršiti bilo koju operaciju, poziva se ova metoda.
  5. prekinutapovratni poziv (): U ovoj fazi, element se uklanja iz DOM-a (suprotno odconnectedcallback()).
  6. ErrorCallback() se poziva kada se pojavi greška u životnom ciklusu.

Struktura Connectedcallback().

Korištenje ConnectedCallback():





  1. Definirajte varijablu i postavite vrijednost svojstva.
  2. Nazovite Apex unutar njega.
  3. Stvorite i pošaljite događaje.
  4. UI API se može pozvati.
  5. Navigacijski servis unutar njega.

Mora biti navedeno u JavaScript datoteci na sljedeći način:



povezan Povratni poziv ( ) {

// čini…

}

Svi primjeri koriste ovu datoteku 'meta.xml'. Nećemo to navoditi u svakom primjeru. Komponente LWC mogu se dodati vašoj stranici za snimanje, stranici aplikacije i početnoj stranici.



verzija = '1,0' ?>

= 'http://soap.sforce.com/2006/04/metadata' >

57.0 < / apiVerzija>

pravi < / je izložen>



munja__RecordPage < / meta>

munja__AppPage < / meta>

munja__Početna stranica < / meta>

< / mete>

< / LightningComponentBundle>

Primjer 1:

Demonstrirat ćemo fazu constructor() iconnectedcallback() kada se komponenta učita u UI.



ConnectedCallBack.html



titula = 'Povratni poziv povezani' >

< / karta munje>

< / predložak>

connectedCallBack.js

// Faza montiranja - konstruktor()

konstruktor ( ) {
super ( )
konzola. log ( 'konstruktor zvan' )
}


// Faza montiranja -connectedCallback()
povezan Povratni poziv ( ) {
konzola. log ( 'connectedCallback pozvan' )
}

Izgleda ovako:



Izlaz:

Dodajte ovu komponentu na stranicu 'Zapis' bilo kojeg objekta.

Pregledajte stranicu (kliknite lijevo i odaberite “Pregledaj”). Zatim idite na karticu 'Konzola'.

Primjer 2:

U ovom primjeru stvorit ćemo voće s dekoratorom staze i postaviti vrijednost svojstva na 'Mango' unutar metodeconnectedcallback(). Ovo se prikazuje na korisničkom sučelju.

prviPrimjer.html



titula = 'Postavljanje svojstava' >

< div razreda = 'slds-var-m-around_medium' >

< b > Naziv voća: < / b > {voće}

< / div >

< / karta munje>

< / predložak>

firstExample.js

uvoz { LightningElement , staza } iz 'sreća' ;

izvoz zadano razreda PrviPrimjer proteže se LightningElement {

@ pratiti voće ;
povezan Povratni poziv ( ) {
// Postavljanje vrijednosti svojstva na Mango
ovaj . voće = 'Mango' ;
}


}

Izlaz:

Dodajte ovu komponentu na stranicu 'Zapis' bilo kojeg objekta. Ovdje ga dodajemo na stranicu 'Zapis računa'. Vidjet ćete da je voće 'Mango'.

Primjer 3:

Upotrijebite prethodni kod i izmijenite neke izjave u 'js' i 'html' datoteci.

Napravite novu varijablu koja je 'broj' s 500 u 'js' datoteci. Postavite voće na 'veće od 500' ako je broj veći od 500.  U suprotnom, postavite voće na 'jednako 500'.

prviPrimjer.html



titula = 'Postavljanje svojstava' >

< div razreda = 'slds-var-m-around_medium' >

< b > Cijena: < / b > {voće}

< / div >

< / karta munje>

< / predložak>

firstExample.js

@ pratiti voće ;

povezan Povratni poziv ( ) {
neka broj = 500 ;


ako ( broj > 500 ) {

ovaj . voće = 'više od 500' ;
}
drugo {
ovaj . voće = 'jednako 500' ;
}


}

Izlaz:

Broj je 500. Dakle, plod drži rezultat kao 'jednako 500'.

Primjer 4:

U ovom scenariju vraćamo zapise računa (objekt računa) pomoću metodeconnectedcallback().

  1. Prvo pišemo Apex klasu koja vraća popis prvih 10 računa s poljima Id, Name, Industry i Rating
  2. Zatim pratimo račune i vraćamo ih u metodiconnectedcallback() pozivanjem metode iz klase Apex.
  3. U HTML datoteci koristimo je za svaku direktivu koja ponavlja račune i vraća naziv i industriju.

AccountData.apxc

javno s dijeljenjem klase AccountData {

@AuraEnabled(cacheable=true)

public static List returnAcc(){

List accountList = [SELECT Id, Name,Industry,Rating FROM Account limit 10];

povratak popisa računa;
}


}

secondExample.html



titula = 'Prikaži popis računa' >

< div razreda = 'slds-var-m-around_medium' >