LWC – ConnectedCallback()

Lwc Connectedcallback



Spletna komponenta Lightning (LWC) ima lasten življenjski cikel za vstavljanje komponente v DOM, njeno upodabljanje in odstranitev komponente iz DOM. ConnectedCallback() (v fazi namestitve) je ena od metod LifeCycle, ki se sproži, ko je komponenta vstavljena v DOM. V tem priročniku bomo s primeri razpravljali o connectioncallback() in različnih scenarijih, ki vključujejo to metodo.

  1. Constructor() je prva metoda v kavlju življenjskega cikla, ki se pokliče, ko je ustvarjen primerek »Component«. Lastnosti komponente v tej fazi ne bodo pripravljene. Če želite dostopati do elementa gostitelja, moramo uporabiti »this.template«. Ker podrejene komponente v tej fazi ne bodo obstajale, tudi do podrejenih komponent ne moremo dostopati. V tej metodi se uporablja Super().
  2. Connectedcallback() je druga metoda (2. faza), ki se kliče, ko je element vstavljen v DOM. V tem primeru kavelj teče od staršev k otroku. Lastnosti komponente v tej fazi ne bodo pripravljene. Če želite dostopati do elementa gostitelja, moramo uporabiti »this.template«. Ker podrejene komponente v tej fazi ne bodo obstajale, tudi do podrejenih komponent ne moremo dostopati.
  3. upodabljati (): Zunanja faza je upodabljanje. Nadrejena komponenta je upodobljena, nato pa bo upodobljena podrejena komponenta, če obstaja. Po upodabljanju nadrejenega elementa se premakne na podrejeno komponento (konstruktor,connectedcallback, render) in sledi istim korakom kot nadrejeni element.
  4. renderedCallback (): Ko je upodabljanje komponente končano in želite izvesti katero koli operacijo po tem, se ta metoda pokliče.
  5. disconnectedCallback (): V tej fazi je element odstranjen iz DOM (nasprotno od Connectedcallback()).
  6. ErrorCallback() se pokliče, ko pride do napake v življenjskem ciklu.

Struktura Connectedcallback().

Uporaba ConnectedCallback():





  1. Definirajte spremenljivko in nastavite vrednost lastnosti.
  2. Pokličite Apex v njem.
  3. Ustvarite in odpošljite dogodke.
  4. UI API je mogoče poklicati.
  5. Navigacijska storitev v njej.

V datoteki JavaScript ga je treba določiti na naslednji način:



povezan Povratni klic ( ) {

// naredi…

}

Vsi primeri uporabljajo to datoteko »meta.xml«. Tega ne bomo navedli v vsakem primeru. Komponente LWC lahko dodate na svojo stran s posnetki, stran aplikacije in domačo stran.



različica = '1,0' ?>

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

57,0 < / apiVersion>

prav < / je izpostavljeno>



strela__RecordPage < / cilj>

lightning__AppPage < / cilj>

strela__Domača stran < / cilj>

< / cilji>

< / LightningComponentBundle>

Primer 1:

Ko se komponenta naloži v uporabniški vmesnik, bomo prikazali fazo constructor() inconnectedcallback().



connectedCallBack.html



naslov = 'Povezan povratni klic' >

< / strela-kartica>

< / predloga>

connectedCallBack.js

// Montažna faza - konstruktor()

konstruktor ( ) {
super ( )
konzola. dnevnik ( 'konstruktor poklican' )
}


// Montažna faza -connectedCallback()
povezan Povratni klic ( ) {
konzola. dnevnik ( 'connectedCallback poklican' )
}

Videti je takole:



Izhod:

Dodajte to komponento na stran »Zapis« katerega koli predmeta.

Preglejte stran (kliknite levo in izberite »Pregled«). Nato pojdite na zavihek »Konzola«.

Primer 2:

V tem primeru bomo ustvarili sadje z dekoratorjem sledi in nastavili vrednost lastnosti na »Mango« znotraj metodeconnectedcallback(). To je prikazano v uporabniškem vmesniku.

firstExample.html



naslov = 'Nastavitev lastnosti' >

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

< b > Ime sadja: < / b > {sadje}

< / div >

< / strela-kartica>

< / predloga>

firstExample.js

uvoz { LightningElement , skladba } od 'sreča' ;

izvoz privzeto razred Prvi Primer se razteza LightningElement {

@ sledi sadje ;
povezan Povratni klic ( ) {
// Nastavitev vrednosti lastnosti na Mango
to . sadje = 'Mango' ;
}


}

Izhod:

Dodajte to komponento na stran »Zapis« katerega koli predmeta. Tu ga dodamo na stran »Zapis računa«. Videli boste, da je sadje 'Mango'.

Primer 3:

Uporabite prejšnjo kodo in spremenite nekaj stavkov v datoteki »js« in »html«.

Ustvarite novo spremenljivko, ki je 'število' s 500 v datoteki 'js'. Nastavite sadje na »več kot 500«, če je število večje od 500.  V nasprotnem primeru nastavite sadje na »enako 500«.

firstExample.html



naslov = 'Nastavitev lastnosti' >

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

< b > Cena: < / b > {sadje}

< / div >

< / strela-kartica>

< / predloga>

firstExample.js

@ sledi sadje ;

povezan Povratni klic ( ) {
pusti številko = 500 ;


če ( število > 500 ) {

to . sadje = 'več kot 500' ;
}
drugače {
to . sadje = 'enako 500' ;
}


}

Izhod:

Število je 500. Torej ima sadje rezultat kot 'enako 500'.

Primer 4:

V tem scenariju vrnemo zapise računa (predmet računa) z uporabo metodeconnectedcallback().

  1. Najprej napišemo razred Apex, ki vrne seznam prvih 10 računov s polji Id, Name, Industry in Rating
  2. Nato sledimo računom in jih vrnemo v metodiconnectedcallback() s klicem metode iz razreda Apex.
  3. V datoteki HTML ga uporabimo za vsako direktivo, ki ponovi račune in vrne ime in panogo.

AccountData.apxc

public with sharing class AccountData {

@AuraEnabled(cacheable=true)

public static List returnAcc(){

Seznam accountList = [IZBERI ID, Ime, Panoga, Ocena IZ Omejitev računa 10];

vrni seznam računov;
}


}

secondExample.html



naslov = 'Prikaži seznam računov' >

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