Lightning Web Component (LWC) ha il proprio ciclo di vita per inserire i componenti nel DOM, eseguirne il rendering e rimuovere i componenti dal DOM. Il connectCallback() (nella fase di montaggio) è uno dei metodi LifeCycle che viene attivato quando il componente viene inserito nel DOM. In questa guida discuteremo di Connectioncallback() e dei diversi scenari che includono questo metodo con esempi.
- Il costruttore() è il primo metodo nell'hook del ciclo di vita che viene chiamato quando viene creata l'istanza 'Componente'. Le proprietà del componente in questa fase non saranno pronte. Se desideri accedere all'elemento host, dobbiamo utilizzare 'this.template'. Poiché i componenti secondari in questa fase non esisteranno, non saremo in grado di accedere anche ai componenti secondari. Super() viene utilizzato in questo metodo.
- Il connectcallback() è il secondo metodo (fase 2) che viene chiamato quando un elemento viene inserito nel DOM. In questo caso, l'hook scorre da genitore a figlio. Le proprietà del componente in questa fase non saranno pronte. Se desideri accedere all'elemento host, dobbiamo utilizzare 'this.template'. Poiché i componenti secondari in questa fase non esisteranno, non saremo in grado di accedere anche ai componenti secondari.
- rendere (): La fase ext è il rendering. Viene eseguito il rendering del componente principale, quindi verrà eseguito il rendering del componente figlio, se esiste. Dopo aver renderizzato il genitore, va al componente figlio (costruttore, callback connesso, rendering) e segue gli stessi passaggi del genitore.
- resoCallback (): Quando il rendering del componente è completato e si desidera eseguire qualsiasi operazione successiva, viene chiamato questo metodo.
- disconnessoRichiamata (): In questa fase, l'elemento viene rimosso dal DOM (al contrario di connectcallback()).
- Il metodo errorCallback() viene chiamato quando si verifica l'errore nel LifeCycle.
Struttura Connectedcallback()
Utilizzando connectcallback():
- Definire una variabile e impostare un valore di proprietà.
- Chiama l'Apex al suo interno.
- Creare e inviare gli eventi.
- È possibile richiamare l'API dell'interfaccia utente.
- Servizio di navigazione al suo interno.
Deve essere specificato nel file JavaScript come segue:
connessoRichiamata ( ) {
// Fare…
}
Tutti gli esempi utilizzano questo file 'meta.xml'. Non lo specificheremo in ogni esempio. I componenti LWC possono essere aggiunti alla pagina record, alla pagina app e alla home page.
versione = '1.0' ?>
<è esposto> VERO < / èesposto>
< / obiettivi>
< / Pacchetto di componenti Lightning>
Esempio 1:
Dimostreremo la fase costruttore() e la fase connectcallback() quando il componente viene caricato sull'interfaccia utente.
connessoCallBack.html
< / carta-fulmine>
< / modello>
connessoCallBack.js
// Fase di montaggio - costruttore()costruttore ( ) {
super ( )
consolle. tronco d'albero ( 'costruttore chiamato' )
}
// Fase di montaggio - connessoCallback()
connessoRichiamata ( ) {
consolle. tronco d'albero ( 'connessoRichiamata chiamata' )
}
Sembra quanto segue:
Produzione:
Aggiungi questo componente alla pagina 'Registra' di qualsiasi oggetto.
Ispeziona la pagina (fai clic a sinistra e seleziona 'Ispeziona'). Quindi, vai alla scheda “Console”.
Esempio 2:
In questo esempio, creeremo un frutto con un decoratore di tracce e imposteremo il valore della proprietà su 'Mango' all'interno del metodo connectcallback(). Questo viene visualizzato sull'interfaccia utente.
primoEsempio.html
< div classe = 'slds-var-m-around_medium' >
< B > Nome del frutto: < / B > {frutta}
< / div >
< / carta-fulmine>
< / modello>
primoEsempio.js
importare { Elemento Fulmine , traccia } da 'fortuna' ;esportare predefinito classe Primo esempio si estende Elemento Fulmine {
@ tenere traccia della frutta ;
connessoRichiamata ( ) {
// Imposta il valore della proprietà su Mango
Questo . frutta = 'Mango' ;
}
}
Produzione:
Aggiungi questo componente alla pagina 'Registra' di qualsiasi oggetto. Qui lo aggiungiamo alla pagina “Registrazione account”. Vedrai che il frutto è “Mango”.
Esempio 3:
Utilizza il codice precedente e modifica alcune istruzioni nei file “js” e “html”.
Crea una nuova variabile che sia 'numero' con 500 nel file 'js'. Imposta il frutto su 'maggiore di 500' se il numero è maggiore di 500. Altrimenti, imposta il frutto su 'uguale a 500'.
primoEsempio.html
< div classe = 'slds-var-m-around_medium' >
< B > Costo: < / B > {frutta}
< / div >
< / carta-fulmine>
< / modello>
primoEsempio.js
@ tenere traccia della frutta ;connessoRichiamata ( ) {
lascia il numero = 500 ;
Se ( numero > 500 ) {
Questo . frutta = 'maggiore di 500' ;
}
altro {
Questo . frutta = 'pari a 500' ;
}
}
Produzione:
Il numero è 500. Quindi il frutto mantiene il risultato come “uguale a 500”.
Esempio 4:
In questo scenario, restituiamo i record dell'account (oggetto Account) utilizzando il metodo connectcallback().
- Per prima cosa scriviamo una classe Apex che restituisca l'elenco dei primi 10 account con i campi Id, Nome, Settore e Rating
- Successivamente, tracciamo gli account e li restituiamo nel metodo connectcallback() chiamando il metodo dalla classe Apex.
- Nel file HTML, lo utilizziamo per ogni direttiva che ripete gli account e restituisce il nome e il settore.
AccountData.apxc
pubblico con classe di condivisione AccountData {@AuraEnabled(cacheable=true)
elenco statico pubblico
Elenco
restituire l'elencoaccount;
}
}
secondoEsempio.html
< div classe = 'slds-var-m-around_medium' >
< P chiave = { account_rec. Id } >< B > Account: < / B > {account_rec.Nome} < B > Industria: < / B > {account_rec.Industria} < / P >
< / modello>
< / modello>
< / div >
< / carta-fulmine>
< / modello>
secondo Esempio.js
Importa returnAcc da Apex classe :importare returnAcc da '@salesforce/apex/AccountData.returnAcc' ;
Scrivere Questo codice all'interno del 'js' classe :
@ tenere traccia dei conti ;
@ errore di tracciamento ;
connessoRichiamata ( ) {
ritornoAcc ( )
// Restituisce i conti
. Poi ( risultato => {
Questo . conti = risultato ;
Questo . errore = non definito ;
} )
. presa ( errore => {
Questo . errore = errore ;
Questo . conti = non definito ;
} ) ;
}
Produzione:
I primi 10 record dell'account vengono restituiti con il nome dell'account e il settore.
Conclusione
Ora è possibile utilizzare il metodo connectcallback() nella maggior parte dei casi mentre si lavora con i dati Apex in LWC. In questa guida, abbiamo discusso come impostare il valore della proprietà utilizzando connectcallback() e incluso Apex al suo interno. Per una migliore comprensione, abbiamo prima fornito un esempio che mostrava i metodi costruttore() e connessocallback(). Devi controllare la tua pagina web e visualizzarla nella console.