LWC – ConnectedCallback()

Lwc Connectedcallback



Lightning Web Component (LWC) mempunyai LifeCycle sendiri untuk memasukkan komponen ke dalam DOM, menjadikannya dan mengalih keluar komponen daripada DOM. ConnectCallback() (dalam  Fasa Pemasangan) ialah salah satu kaedah LifeCycle yang dicetuskan apabila komponen dimasukkan ke dalam DOM. Dalam panduan ini, kami akan membincangkan connectioncallback() dan senario berbeza yang menyertakan kaedah ini dengan contoh.

  1. Pembina() ialah kaedah pertama dalam cangkuk Kitar Hayat yang dipanggil apabila tika 'Komponen' dicipta. Sifat komponen dalam fasa ini tidak akan sedia. Jika anda ingin mengakses elemen hos, kami perlu menggunakan 'this.template'. Memandangkan komponen kanak-kanak dalam fasa ini tidak akan wujud, kami tidak dapat mengakses komponen kanak-kanak itu juga. Super() digunakan dalam kaedah ini.
  2. Connectcallback() ialah kaedah kedua (fasa 2) yang dipanggil apabila elemen dimasukkan ke dalam DOM. Dalam kes ini, cangkuk mengalir dari ibu bapa kepada anak. Sifat komponen dalam fasa ini tidak akan sedia. Jika anda ingin mengakses elemen hos, kami perlu menggunakan 'this.template'. Memandangkan komponen kanak-kanak dalam fasa ini tidak akan wujud, kami tidak dapat mengakses komponen kanak-kanak itu juga.
  3. render (): Fasa ext sedang dipaparkan. Komponen induk diberikan dan kemudian komponen anak akan dipaparkan jika ia wujud. Selepas membuat induk, ia pergi ke komponen anak (pembina, connectedcallback, render) dan mengikuti langkah yang sama seperti induk.
  4. renderedCallback (): Apabila rendering komponen selesai dan anda ingin melakukan sebarang operasi selepas ini, kaedah ini dipanggil.
  5. diputuskanPanggil balik (): Dalam peringkat ini, elemen dialih keluar daripada DOM (bertentangan dengan connectedcallback()).
  6. ErrorCallback() dipanggil apabila ralat berlaku dalam LifeCycle.

Struktur Connectedcallback().

Menggunakan connectedcallback():





  1. Tentukan pembolehubah dan tetapkan nilai sifat.
  2. Panggil Apex di dalamnya.
  3. Buat dan hantar acara.
  4. API UI boleh dipanggil.
  5. Perkhidmatan navigasi di dalamnya.

Ia perlu dinyatakan dalam fail JavaScript seperti berikut:



disambungPanggil balik ( ) {

// buat…

}

Semua contoh menggunakan fail 'meta.xml' ini. Kami tidak akan menyatakan ini dalam setiap contoh. Komponen LWC boleh ditambahkan pada Halaman Rekod, Halaman Apl dan Halaman Utama anda.



versi = '1.0' ?>

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

57.0 < / apiVersion>

benar < / isExposed>



kilat__RekodPage < / sasaran>

kilat__AppPage < / sasaran>

kilat__Laman Utama < / sasaran>

< / sasaran>

< / LightningComponentBundle>

Contoh 1:

Kami akan menunjukkan fasa constructor() dan connectedcallback() apabila komponen dimuatkan pada UI.



connectedCallBack.html



tajuk = 'Connectedcallback' >

< / kad kilat>

< / templat>

connectedCallBack.js

// Fasa Pemasangan - pembina()

pembina ( ) {
hebat ( )
konsol. log ( 'pembina dipanggil' )
}


// Fasa Pemasangan - connectedCallback()
disambungPanggil balik ( ) {
konsol. log ( 'connectedCallback dipanggil' )
}

Ia kelihatan seperti berikut:



Pengeluaran:

Tambahkan komponen ini pada halaman 'Rekod' mana-mana objek.

Periksa halaman (klik kiri dan pilih 'Periksa'). Kemudian, pergi ke tab 'Konsol'.

Contoh 2:

Dalam contoh ini, kami akan mencipta buah dengan penghias trek dan menetapkan nilai harta kepada 'Mangga' di dalam kaedah connectedcallback(). Ini dipaparkan pada UI.

firstExample.html



tajuk = 'Menetapkan Sifat' >

< div kelas = 'slds-var-m-around_medium' >

< b > Nama buah: < / b > {buah}

< / div >

< / kad kilat>

< / templat>

firstExample.js

import { Elemen Kilat , trek } daripada 'nasib baik' ;

eksport lalai kelas Contoh Pertama memanjang Elemen Kilat {

@ buah jejak ;
disambungPanggil balik ( ) {
// Menetapkan nilai harta kepada Mango
ini . buah-buahan = 'Mangga' ;
}


}

Pengeluaran:

Tambahkan komponen ini pada halaman 'Rekod' mana-mana objek. Di sini kami menambahkannya ke halaman 'Rekod Akaun'. Anda akan melihat bahawa buahnya adalah 'Mangga'.

Contoh 3:

Gunakan kod sebelumnya dan ubah suai beberapa pernyataan dalam fail 'js' dan 'html'.

Buat pembolehubah baharu iaitu 'nombor' dengan 500 dalam fail 'js'. Tetapkan buah kepada 'lebih daripada 500' jika bilangannya lebih daripada 500.  Jika tidak, tetapkan buah sebagai 'sama dengan 500'.

firstExample.html



tajuk = 'Menetapkan Sifat' >

< div kelas = 'slds-var-m-around_medium' >

< b > Kos: < / b > {buah}

< / div >

< / kad kilat>

< / templat>

firstExample.js

@ buah jejak ;

disambungPanggil balik ( ) {
biar nombor = 500 ;


jika ( nombor > 500 ) {

ini . buah-buahan = 'lebih daripada 500' ;
}
lain {
ini . buah-buahan = 'sama dengan 500' ;
}


}

Pengeluaran:

Nombornya ialah 500. Jadi, buah itu memegang hasilnya sebagai 'sama dengan 500'.

Contoh 4:

Dalam senario ini, kami mengembalikan rekod akaun (Objek akaun) menggunakan kaedah connectedcallback().

  1. Mula-mula, kami menulis kelas Apex yang mengembalikan senarai 10 akaun pertama dengan medan Id, Nama, Industri dan Penilaian
  2. Seterusnya, kami menjejaki akaun dan mengembalikannya dalam kaedah connectedcallback() dengan memanggil kaedah daripada kelas Apex.
  3. Dalam fail HTML, kami menggunakannya untuk setiap arahan yang mengulangi akaun dan mengembalikan Nama dan Industri.

AccountData.apxc

awam dengan kelas perkongsian AccountData {

@AuraEnabled(cacheable=true)

Senarai statik awam returnAcc(){

List accountList = [PILIH Id, Nama,Industri,Rating DARI Had Akaun 10];

kembalikan senarai akaun;
}


}

secondExample.html



tajuk = 'Paparkan senarai Akaun' >

< div kelas = 'slds-var-m-around_medium' >