El Lightning Web Component (LWC) té el seu propi cicle de vida per inserir el/s component/s al DOM, renderitzar-lo i eliminar el/s component/s del DOM. ConnectedCallback() (a la fase de muntatge) és un dels mètodes del cicle de vida que s'activa quan el component s'insereix al DOM. En aquesta guia, parlarem de connectioncallback() i dels diferents escenaris que inclouen aquest mètode amb exemples.
- El constructor() és el primer mètode del ganxo del cicle de vida que es crida quan es crea la instància 'Component'. Les propietats dels components en aquesta fase no estaran preparades. Si voleu accedir a l'element amfitrió, hem d'utilitzar “this.template”. Com que els components secundaris d'aquesta fase no existiran, tampoc podem accedir als components secundaris. En aquest mètode s'utilitza Super().
- Connectedcallback() és el segon mètode (fase 2) que s'anomena quan s'insereix un element al DOM. En aquest cas, el ganxo flueix de pares a fills. Les propietats dels components en aquesta fase no estaran preparades. Si voleu accedir a l'element amfitrió, hem d'utilitzar “this.template”. Com que els components secundaris d'aquesta fase no existiran, tampoc podem accedir als components secundaris.
- renderitzar (): La fase ext s'està renderitzant. El component pare es renderitza i, si existeix, el component secundari es representarà. Després de renderitzar el pare, va al component fill (constructor, connectat callback, render) i segueix els mateixos passos que el pare.
- renderedCallback (): Quan s'ha completat la representació del component i voleu realitzar qualsevol operació després d'això, s'anomena aquest mètode.
- desconnectedCallback (): En aquesta etapa, l'element s'elimina del DOM (oposat al connectedcallback()).
- El errorCallback() es crida quan l'error es produeix al LifeCycle.
Connectedcallback() Estructura
Utilitzant el connectedcallback():
- Definiu una variable i establiu un valor de propietat.
- Truqueu a l'Àpex que hi ha dins.
- Crear i enviar els esdeveniments.
- Es pot trucar a l'API de la IU.
- Servei de navegació al seu interior.
S'ha d'especificar al fitxer JavaScript com el següent:
Devolució de trucada connectada ( ) {
// fer...
}
Tots els exemples utilitzen aquest fitxer 'meta.xml'. No ho especificarem en cada exemple. Els components LWC es poden afegir a la vostra pàgina de registre, pàgina d'aplicació i pàgina d'inici.
versió = '1.0' ?>
<és exposat> veritat < / està exposat>
< / objectius>
< / LightningComponentBundle>
Exemple 1:
Demostrarem la fase del constructor() i la devolució de trucada connectada() quan el component es carregui a la IU.
connectatCallBack.html
< / targeta-llamp>
< / plantilla>
connectatCallBack.js
// Fase de muntatge - constructor()constructor ( ) {
súper ( )
consola. registre ( 'anomenat constructor' )
}
// Fase de muntatge - connectatCallback()
Devolució de trucada connectada ( ) {
consola. registre ( 'connectedCallback anomenat' )
}
Sembla el següent:
Sortida:
Afegiu aquest component a la pàgina 'Registre' de qualsevol objecte.
Inspeccioneu la pàgina (feu clic a l'esquerra i seleccioneu 'Inspeccionar'). A continuació, aneu a la pestanya 'Consola'.
Exemple 2:
En aquest exemple, crearem una fruita amb un decorador de pistes i establirem el valor de la propietat a 'Mango' dins del mètode connectatcallback(). Això es mostra a la interfície d'usuari.
firstExample.html
< div classe = 'slds-var-m-around_medium' >
< b > Nom de la fruita: < / b > {fruita}
< / div >
< / targeta-llamp>
< / plantilla>
firstExample.js
importar { Element Lightning , pista } des de 'sort' ;exportar per defecte classe Primer exemple s'estén Element Lightning {
@ seguiment de la fruita ;
Devolució de trucada connectada ( ) {
// Configurant el valor de la propietat a Mango
això . fruita = 'Mango' ;
}
}
Sortida:
Afegiu aquest component a la pàgina 'Registre' de qualsevol objecte. Aquí l'afegim a la pàgina 'Registre del compte'. Veureu que la fruita és “Mango”.
Exemple 3:
Utilitzeu el codi anterior i modifiqueu algunes declaracions al fitxer 'js' i 'html'.
Creeu una variable nova que sigui 'número' amb 500 al fitxer 'js'. Estableix la fruita com a 'més de 500' si el nombre és superior a 500. En cas contrari, defineix la fruita com a 'igual a 500'.
firstExample.html
< div classe = 'slds-var-m-around_medium' >
< b > Cost: < / b > {fruita}
< / div >
< / targeta-llamp>
< / plantilla>
firstExample.js
@ seguiment de la fruita ;Devolució de trucada connectada ( ) {
deixar número = 500 ;
si ( nombre > 500 ) {
això . fruita = 'més de 500' ;
}
altra cosa {
això . fruita = 'igual a 500' ;
}
}
Sortida:
El nombre és 500. Per tant, la fruita té el resultat com a 'igual a 500'.
Exemple 4:
En aquest escenari, retornem els registres del compte (objecte del compte) mitjançant el mètode connectatcallback().
- Primer, escrivim una classe Apex que retorna la llista dels 10 primers comptes amb els camps Id, Nom, Indústria i Valoració
- A continuació, fem un seguiment dels comptes i els retornem al mètode connectatcallback() cridant al mètode des de la classe Apex.
- Al fitxer HTML, l'utilitzem per a cada directiva que itera els comptes i retorna el nom i la indústria.
AccountData.apxc
públic amb classe per compartir AccountData {@AuraEnabled (cacheable=true)
Public static List
List
retornar la llista de comptes;
}
}
segonExemple.html
< div classe = 'slds-var-m-around_medium' >
< pàg clau = { compte_rec. Id } >< b > Compte: < / b > {account_rec.Name} < b > Indústria: < / b > {account_rec.Industry} < / pàg >
< / plantilla>
< / plantilla>
< / div >
< / targeta-llamp>
< / plantilla>
secondExample.js
Importeu el returnAcc des de l'Apex classe :importar returnAcc de '@salesforce/apex/AccountData.returnAcc' ;
Escriu això codi dins del 'js' classe :
@ seguiment dels comptes ;
@ error de pista ;
Devolució de trucada connectada ( ) {
retornAcc ( )
// Torna els comptes
. aleshores ( resultat => {
això . comptes = resultat ;
això . error = indefinit ;
} )
. agafar ( error => {
això . error = error ;
això . comptes = indefinit ;
} ) ;
}
Sortida:
Els primers 10 registres del compte es tornen amb el nom del compte i el sector.
Conclusió
Ara, podeu utilitzar el mètode connectatcallback() en la majoria dels casos mentre treballeu amb dades Apex a LWC. En aquesta guia, vam parlar de com establir el valor de la propietat mitjançant connectedcallback() i vam incloure Apex. Per a una millor comprensió, primer vam proporcionar un exemple que mostrava els mètodes constructor() i connectedcallback(). Heu d'inspeccionar la vostra pàgina web i veure-la a la consola.