O Lightning Web Component (LWC) tem seu próprio ciclo de vida para inserir os componentes no DOM, renderizá-los e remover os componentes do DOM. O conectadoCallback() (na fase de montagem) é um dos métodos LifeCycle que é acionado quando o componente é inserido no DOM. Neste guia, discutiremos connectioncallback() e os diferentes cenários que incluem este método com exemplos.
- O construtor() é o primeiro método no gancho Lifecycle que é chamado quando a instância “Component” é criada. As propriedades dos componentes nesta fase não estarão prontas. Se você quiser acessar o elemento host, precisamos usar “this.template”. Como os componentes filhos nesta fase não existirão, também não poderemos acessá-los. Super() é usado neste método.
- O conectadocallback() é o segundo método (fase 2) que é chamado quando um elemento é inserido no DOM. Nesse caso, o gancho flui de pai para filho. As propriedades dos componentes nesta fase não estarão prontas. Se você quiser acessar o elemento host, precisamos usar “this.template”. Como os componentes filhos nesta fase não existirão, também não poderemos acessá-los.
- renderizar (): A fase ext é renderização. O componente pai é renderizado e então o componente filho será renderizado se existir. Após renderizar o pai, ele vai para o componente filho (construtor, conectadocallback, render) e segue os mesmos passos do pai.
- renderizadoCallback (): Quando a renderização do componente for concluída e você quiser realizar alguma operação após isso, este método é chamado.
- desconectadoCallback (): Nesta etapa, o elemento é removido do DOM (oposto ao conectadocallback()).
- O errorCallback() é chamado quando o erro ocorre no LifeCycle.
Estrutura Connectedcallback()
Usando o conectadocallback():
- Defina uma variável e defina um valor de propriedade.
- Chame o Apex dentro dele.
- Crie e despache os eventos.
- A API UI pode ser chamada.
- Serviço de navegação dentro dele.
Deve ser especificado no arquivo JavaScript da seguinte forma:
conectadoCallback ( ) {
// fazer…
}
Todos os exemplos utilizam este arquivo “meta.xml”. Não especificaremos isso em cada exemplo. Os componentes LWC podem ser adicionados à sua página de registro, página do aplicativo e página inicial.
versão = '1,0' ?>
< / alvos>
< / LightningComponentBundle>
Exemplo 1:
Demonstraremos as fases construtor() e conectadocallback() quando o componente for carregado na UI.
conectadoCallBack.html
< / cartão relâmpago>
< / modelo>
conectadoCallBack.js
// Fase de montagem - construtor()construtor ( ) {
super ( )
console. registro ( 'construtor chamado' )
}
// Fase de montagem -connectedCallback()
conectadoCallback ( ) {
console. registro ( 'connectedCallback chamado' )
}
Parece o seguinte:
Saída:
Adicione este componente à página “Registro” de qualquer objeto.
Inspecione a página (clique à esquerda e selecione “Inspecionar”). Em seguida, vá para a guia “Console”.
Exemplo 2:
Neste exemplo, criaremos uma fruta com um decorador de trilha e definiremos o valor da propriedade como “Mango” dentro do método conectadocallback(). Isso é exibido na IU.
primeiroExemplo.html
< divisão aula = 'slds-var-m-around_medium' >
< b > Nome da fruta: < / b > {fruta}
< / divisão >
< / cartão relâmpago>
< / modelo>
primeiroExemplo.js
importar { Elemento Relâmpago , acompanhar } de 'sorte' ;exportar padrão aula Primeiro exemplo estende Elemento Relâmpago {
@ rastrear frutas ;
conectadoCallback ( ) {
//Definindo o valor da propriedade como Mango
esse . fruta = 'Manga' ;
}
}
Saída:
Adicione este componente à página “Registro” de qualquer objeto. Aqui nós o adicionamos à página “Registro da conta”. Você verá que a fruta é “Manga”.
Exemplo 3:
Utilize o código anterior e modifique algumas instruções no arquivo “js” e “html”.
Crie uma nova variável que seja “número” com 500 no arquivo “js”. Defina a fruta como “maior que 500” se o número for maior que 500. Caso contrário, defina a fruta como “igual a 500”.
primeiroExemplo.html
< divisão aula = 'slds-var-m-around_medium' >
< b > Custo: < / b > {fruta}
< / divisão >
< / cartão relâmpago>
< / modelo>
primeiroExemplo.js
@ rastrear frutas ;conectadoCallback ( ) {
deixe o número = 500 ;
se ( número > 500 ) {
esse . fruta = 'maior que 500' ;
}
outro {
esse . fruta = 'igual a 500' ;
}
}
Saída:
O número é 500. Portanto, a fruta mantém o resultado “igual a 500”.
Exemplo 4:
Neste cenário, retornamos os registros da conta (objeto Conta) usando o método conectadocallback().
- Primeiro, escrevemos uma classe Apex que retorna a lista das 10 primeiras contas com os campos Id, Name, Industry e Rating
- A seguir, rastreamos as contas e as retornamos no método conectadocallback() chamando o método da classe Apex.
- No arquivo HTML, usamos para cada diretiva que itera as contas e retorna o Nome e o Setor.
Dadosdaconta.apxc
public com classe de compartilhamento AccountData {@AuraEnabled(cacheable=true)
public static List
List
return listadecontas;
}
}
segundoExemplo.html
< divisão aula = 'slds-var-m-around_medium' >
< p chave = { conta_rec. Eu ia } >< b > Conta: < / b > {account_rec.Name} < b > Indústria: < / b > {account_rec.Indústria} < / p >
< / modelo>
< / modelo>
< / divisão >
< / cartão relâmpago>
< / modelo>
segundoExemplo.js
Importe o returnAcc do Apex aula :importar retornarAcc de '@salesforce/apex/AccountData.returnAcc' ;
Escrever esse código dentro do “js” aula :
@ rastrear contas ;
@ erro de rastreamento ;
conectadoCallback ( ) {
retornarAcc ( )
//Retorna as contas
. então ( resultado => {
esse . contas = resultado ;
esse . erro = indefinido ;
} )
. pegar ( erro => {
esse . erro = erro ;
esse . contas = indefinido ;
} ) ;
}
Saída:
Os primeiros 10 registros de conta são retornados com o Nome da Conta e o Setor.
Conclusão
Agora, você pode usar o método conectadocallback() na maioria dos casos ao trabalhar com dados do Apex no LWC. Neste guia, discutimos como definir o valor da propriedade usandoconnectedcallback() e incluímos o Apex nele. Para melhor compreensão, primeiro fornecemos um exemplo que mostra os métodos construtor() e conectadocallback(). Você precisa inspecionar sua página da web e visualizá-la no console.