LWC – ConnectedCallback()

Lwc Connectedcallback



Componenta Web Lightning (LWC) are propriul său ciclu de viață pentru a insera componentele în DOM, le reda și pentru a elimina componentele din DOM. ConnectedCallback() (în faza de montare) este una dintre metodele LifeCycle care este declanșată atunci când componenta este inserată în DOM. În acest ghid, vom discuta despre connectioncallback() și despre diferitele scenarii care includ această metodă cu exemple.

  1. Constructorul() este prima metodă din cârligul Lifecycle care este apelată atunci când este creată instanța „Componentă”. Proprietățile componentelor din această fază nu vor fi gata. Dacă doriți să accesați elementul gazdă, trebuie să folosim „this.template”. Deoarece componentele copil din această fază nu vor exista, nu putem accesa nici componentele copil. Super() este folosit în această metodă.
  2. Connectedcallback() este a doua metodă (faza 2) care este apelată atunci când un element este inserat în DOM. În acest caz, cârligul curge de la părinte la copil. Proprietățile componentelor din această fază nu vor fi gata. Dacă doriți să accesați elementul gazdă, trebuie să folosim „this.template”. Deoarece componentele copil din această fază nu vor exista, nu putem accesa nici componentele copil.
  3. face (): Faza ext este redare. Componenta părinte este randată și apoi componenta fii va reda dacă există. După randarea părintelui, acesta merge la componenta fii (constructor, apel invers conectat, randare) și urmează aceiași pași ca și părintele.
  4. randedCallback (): Când randarea componentei este finalizată și doriți să efectuați orice operație după aceasta, această metodă este apelată.
  5. deconectatCallback (): În această etapă, elementul este eliminat din DOM (opusă callback() conectat).
  6. ErrorCallback() este apelat atunci când eroarea apare în LifeCycle.

Structura Connectedcallback().

Folosind apelul invers conectat():





  1. Definiți o variabilă și setați o valoare a proprietății.
  2. Apelați Apex-ul din el.
  3. Creați și expediați evenimentele.
  4. UI API poate fi apelat.
  5. Serviciu de navigație în interiorul acestuia.

Trebuie specificat în fișierul JavaScript, după cum urmează:



conectatCallback ( ) {

// fac...

}

Toate exemplele folosesc acest fișier „meta.xml”. Nu vom specifica acest lucru în fiecare exemplu. Componentele LWC pot fi adăugate la Pagina de înregistrare, Pagina de aplicație și Pagina de pornire.



versiune = „1.0” ?>

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

57,0 < / apiVersion>

Adevărat < / este Expus>

<ținte>

<țintă> lightning__RecordPage < / tinta>

<țintă> lightning__AppPage < / tinta>

<țintă> lightning__HomePage < / tinta>

< / tinte>

< / LightningComponentBundle>

Exemplul 1:

Vom demonstra faza constructor() și conectat callback() atunci când componenta este încărcată pe UI.



connectedCallBack.html

<șablon>

titlu = „Reapel conectat” >

< / carte-fulger>

< / șablon>

ConnectedCallBack.js

// Faza de montare - constructor()

constructor ( ) {
super ( )
consolă. Buturuga ( 'Constructorul numit' )
}


// Faza de montare - connectedCallback()
conectatCallback ( ) {
consolă. Buturuga ( „connectedCallback numit” )
}

Arată așa:



Ieșire:

Adăugați această componentă la pagina „Înregistrare” a oricărui obiect.

Inspectați pagina (faceți clic în stânga și selectați „Inspectați”). Apoi, accesați fila „Consolă”.

Exemplul 2:

În acest exemplu, vom crea un fruct cu un decorator de piese și vom seta valoarea proprietății la „Mango” în cadrul metodei connectedcallback(). Acesta este afișat pe interfața de utilizare.

firstExample.html

<șablon>

titlu = „Setarea proprietăților” >

< div clasă = „slds-var-m-around_medium” >

< b > Numele fructelor: < / b > {fructe}

< / div >

< / carte-fulger>

< / șablon>

firstExample.js

import { LightningElement , urmări } din 'noroc' ;

export Mod implicit clasă Primul exemplu se extinde LightningElement {

@ urmărește fructele ;
conectatCallback ( ) {
// Setarea valorii proprietății la Mango
acest . fructe = 'Mango' ;
}


}

Ieșire:

Adăugați această componentă la pagina „Înregistrare” a oricărui obiect. Aici îl adăugăm la pagina „Înregistrarea contului”. Veți vedea că fructul este „Mango”.

Exemplul 3:

Utilizați codul anterior și modificați unele declarații din fișierul „js” și „html”.

Creați o nouă variabilă care este „număr” cu 500 în fișierul „js”. Setați fructele la „mai mare de 500” dacă numărul este mai mare de 500.  În caz contrar, setați fructul ca „egal cu 500”.

firstExample.html

<șablon>

titlu = „Setarea proprietăților” >

< div clasă = „slds-var-m-around_medium” >

< b > Cost: < / b > {fructe}

< / div >

< / carte-fulger>

< / șablon>

firstExample.js

@ urmărește fructele ;

conectatCallback ( ) {
lasa numarul = 500 ;


dacă ( număr > 500 ) {

acest . fructe = 'mai mare de 500' ;
}
altfel {
acest . fructe = „egal cu 500” ;
}


}

Ieșire:

Numărul este 500. Deci, fructul deține rezultatul „egal cu 500”.

Exemplul 4:

În acest scenariu, returnăm înregistrările contului (obiectul Cont) folosind metoda connectedcallback().

  1. Mai întâi, scriem o clasă Apex care returnează lista primelor 10 conturi cu câmpurile Id, Name, Industry și Rating.
  2. În continuare, urmărim conturile și le returnăm în metoda connectedcallback() apelând metoda din clasa Apex.
  3. În fișierul HTML, îl folosim pentru fiecare directivă care repetă conturile și returnează numele și industria.

AccountData.apxc

public cu clasa de partajare AccountData {

@AuraEnabled(cacheable=true)

public static List returnAcc(){

List accountList = [SELECT ID, Nume, Industrie, Evaluare FROM Limita contului 10];

returnează Listă cont;
}


}

secondExample.html

<șablon>

titlu = „Afișează lista de conturi” >

< div clasă = „slds-var-m-around_medium” >