Lightning Web Component (LWC) tiene su propio ciclo de vida para insertar los componentes en el DOM, renderizarlos y eliminar los componentes del DOM. ConnectedCallback() (en la fase de montaje) es uno de los métodos de LifeCycle que se activa cuando el componente se inserta en el DOM. En esta guía, analizaremos la conexióncallback() y los diferentes escenarios que incluyen este método con ejemplos.
- El constructor() es el primer método en el enlace del ciclo de vida que se llama cuando se crea la instancia del 'Componente'. Las propiedades de los componentes en esta fase no estarán listas. Si desea acceder al elemento host, debemos usar 'this.template'. Como los componentes secundarios en esta fase no existirán, tampoco podremos acceder a los componentes secundarios. Super() se utiliza en este método.
- Connectedcallback() es el segundo método (fase 2) que se llama cuando se inserta un elemento en DOM. En este caso, el gancho fluye de padre a hijo. Las propiedades de los componentes en esta fase no estarán listas. Si desea acceder al elemento host, debemos usar 'this.template'. Como los componentes secundarios en esta fase no existirán, tampoco podremos acceder a los componentes secundarios.
- prestar (): La fase ext se está renderizando. El componente principal se representa y luego el componente secundario se representará si existe. Después de renderizar el padre, va al componente hijo (constructor, devolución de llamada conectada, renderizado) y sigue los mismos pasos que el padre.
- renderizadoDevolución de llamada (): Cuando se completa la renderización del componente y desea realizar cualquier operación después de esto, se llama a este método.
- desconectadoDevolución de llamada (): En esta etapa, el elemento se elimina del DOM (a diferencia de la devolución de llamada conectada ()).
- Se llama a errorCallback() cuando se produce el error en LifeCycle.
Estructura de devolución de llamada conectada ()
Usando la devolución de llamada conectada():
- Defina una variable y establezca un valor de propiedad.
- Llame al Apex que está dentro.
- Crear y enviar los eventos.
- Se puede llamar a la API de UI.
- Servicio de navegación en su interior.
Debe especificarse en el archivo JavaScript de la siguiente manera:
conectadoDevolución de llamada ( ) {
// hacer…
}
Todos los ejemplos utilizan este archivo 'meta.xml'. No especificaremos esto en cada ejemplo. Los componentes de LWC se pueden agregar a su página de registro, página de aplicación y página de inicio.
versión = '1.0' ?>
< / objetivos>
< / Paquete de componentes Lightning>
Ejemplo 1:
Demostraremos las fases constructor() y connectcallback() cuando el componente se carga en la interfaz de usuario.
conectadoCallBack.html
< / tarjeta-rayo>
< / plantilla>
conectadoCallBack.js
// Fase de montaje - constructor()constructor ( ) {
súper ( )
consola. registro ( 'constructor llamado' )
}
// Fase de montaje - connectCallback()
conectadoDevolución de llamada ( ) {
consola. registro ( 'Devolución de llamada conectada llamada' )
}
Se parece a lo siguiente:
Producción:
Agregue este componente a la página 'Registro' de cualquier objeto.
Inspeccione la página (haga clic hacia la izquierda y seleccione 'Inspeccionar'). Luego, vaya a la pestaña 'Consola'.
Ejemplo 2:
En este ejemplo, crearemos una fruta con un decorador de pistas y estableceremos el valor de la propiedad en 'Mango' dentro del método connectcallback(). Esto se muestra en la interfaz de usuario.
primerEjemplo.html
< div clase = 'slds-var-m-around_medium' >
< b > Nombre de la fruta: < / b > {fruta}
< / div >
< / tarjeta-rayo>
< / plantilla>
primerEjemplo.js
importar { Elemento relámpago , pista } de 'suerte' ;exportar por defecto clase Primer ejemplo se extiende Elemento relámpago {
@ rastrear fruta ;
conectadoDevolución de llamada ( ) {
// Estableciendo el valor de la propiedad en Mango
este . fruta = 'Mango' ;
}
}
Producción:
Agregue este componente a la página 'Registro' de cualquier objeto. Aquí lo agregamos a la página 'Registro de cuenta'. Verás que la fruta es “Mango”.
Ejemplo 3:
Utilice el código anterior y modifique algunas declaraciones en los archivos “js” y “html”.
Cree una nueva variable que sea 'número' con 500 en el archivo 'js'. Establezca la fruta en 'mayor que 500' si el número es mayor que 500. De lo contrario, establezca la fruta en 'igual a 500'.
primerEjemplo.html
< div clase = 'slds-var-m-around_medium' >
< b > Costo: < / b > {fruta}
< / div >
< / tarjeta-rayo>
< / plantilla>
primerEjemplo.js
@ rastrear fruta ;conectadoDevolución de llamada ( ) {
deja el numero = 500 ;
si ( número > 500 ) {
este . fruta = 'mayor que 500' ;
}
demás {
este . fruta = 'igual a 500' ;
}
}
Producción:
El número es 500. Entonces, la fruta tiene el resultado 'igual a 500'.
Ejemplo 4:
En este escenario, devolvemos los registros de la cuenta (objeto Cuenta) utilizando el método connectcallback().
- Primero, escribimos una clase de Apex que devuelve la lista de las primeras 10 cuentas con los campos Id., Nombre, Industria y Calificación.
- A continuación, realizamos un seguimiento de las cuentas y las devolvemos en el método connectcallback() llamando al método desde la clase Apex.
- En el archivo HTML, lo usamos para cada directiva que itera las cuentas y devuelve el Nombre y la Industria.
Datos de cuenta.apxc
público con clase compartida AccountData {@AuraEnabled(cachéable=verdadero)
Lista estática pública
Lista
devolver lista de cuentas;
}
}
segundoEjemplo.html
< div clase = 'slds-var-m-around_medium' >
< pag llave = { cuenta_rec. Identificación } >< b > Cuenta: < / b > {account_rec.Name} < b > Industria: < / b > {account_rec.Industria} < / pag >
< / plantilla>
< / plantilla>
< / div >
< / tarjeta-rayo>
< / plantilla>
segundoEjemplo.js
Importar returnAcc desde Apex clase :importar volverAcc de '@salesforce/apex/AccountData.returnAcc' ;
Escribir este código dentro del “js” clase :
@ rastrear cuentas ;
@ error de seguimiento ;
conectadoDevolución de llamada ( ) {
retornoAcc ( )
// Devolver las cuentas
. entonces ( resultado => {
este . cuentas = resultado ;
este . error = indefinido ;
} )
. atrapar ( error => {
este . error = error ;
este . cuentas = indefinido ;
} ) ;
}
Producción:
Los primeros 10 registros de cuenta se devuelven con el nombre de la cuenta y la industria.
Conclusión
Ahora, puede utilizar el método connectcallback() en la mayoría de los casos mientras trabaja con datos de Apex en LWC. En esta guía, analizamos cómo establecer el valor de la propiedad usando connectcallback() e incluimos Apex en él. Para una mejor comprensión, primero proporcionamos un ejemplo que muestra los métodos constructor() y connectcallback(). Debe inspeccionar su página web y verla en la consola.