Lightning Web Component (LWC) memiliki LifeCycle sendiri untuk memasukkan komponen ke dalam DOM, merendernya, dan menghapus komponen dari DOM. connectCallback() (dalam Fase Pemasangan) adalah salah satu metode LifeCycle yang diaktifkan ketika komponen dimasukkan ke dalam DOM. Dalam panduan ini, kita akan membahas connectioncallback() dan berbagai skenario yang menyertakan metode ini beserta contohnya.
- Konstruktor() adalah metode pertama dalam kait Siklus Hidup yang dipanggil ketika instance “Komponen” dibuat. Properti komponen pada fase ini tidak akan siap. Jika Anda ingin mengakses elemen host, kita perlu menggunakan “this.template”. Karena komponen anak pada fase ini tidak ada, kami juga tidak dapat mengakses komponen anak. Super() digunakan dalam metode ini.
- connectcallback() adalah metode kedua (fase 2) yang dipanggil ketika sebuah elemen dimasukkan ke dalam DOM. Dalam hal ini, pengait mengalir dari orang tua ke anak. Properti komponen pada fase ini tidak akan siap. Jika Anda ingin mengakses elemen host, kita perlu menggunakan “this.template”. Karena komponen anak pada fase ini tidak ada, kami juga tidak dapat mengakses komponen anak.
- memberikan (): Fase ext sedang dirender. Komponen induk dirender dan kemudian komponen anak akan dirender jika ada. Setelah merender induknya, ia menuju ke komponen anak (konstruktor, panggilan balik terhubung, render) dan mengikuti langkah-langkah yang sama seperti induknya.
- diberikanPanggilan Balik (): Ketika rendering komponen selesai dan Anda ingin melakukan operasi apa pun setelahnya, metode ini dipanggil.
- panggilan balik terputus (): Pada tahap ini, elemen dihapus dari DOM (berlawanan dengan connectcallback()).
- errorCallback() dipanggil ketika kesalahan terjadi di LifeCycle.
Struktur Connectedcallback()
Menggunakan panggilan balik terhubung():
- Tentukan variabel dan tetapkan nilai properti.
- Panggil Apex di dalamnya.
- Membuat dan mengirimkan acara.
- UI API dapat dipanggil.
- Layanan navigasi di dalamnya.
Itu harus ditentukan dalam file JavaScript seperti berikut:
terhubungPanggilan Balik ( ) {
// Mengerjakan…
}
Semua contoh menggunakan file “meta.xml” ini. Kami tidak akan menjelaskan hal ini dalam setiap contoh. Komponen LWC dapat ditambahkan ke Halaman Rekaman, Halaman Aplikasi, dan Halaman Beranda Anda.
Versi: kapan = '1.0' ?>
< / target>
< / Paket Komponen Lightning>
Contoh 1:
Kami akan mendemonstrasikan fase konstruktor() dan connectcallback() saat komponen dimuat di UI.
terhubungCallBack.html
< / kartu petir>
< / templat>
terhubungCallBack.js
// Fase Pemasangan - konstruktor()konstruktor ( ) {
super ( )
menghibur. catatan ( 'konstruktor dipanggil' )
}
// Fase Pemasangan - connectCallback()
terhubungPanggilan Balik ( ) {
menghibur. catatan ( 'connectedCallback dipanggil' )
}
Tampilannya seperti berikut:
Keluaran:
Tambahkan komponen ini ke halaman 'Rekam' objek apa pun.
Periksa halaman (klik kiri dan pilih “Periksa”). Lalu, buka tab “Konsol”.
Contoh 2:
Dalam contoh ini, kita akan membuat buah dengan dekorator track dan menetapkan nilai properti menjadi “Mango” di dalam metode connectcallback(). Ini ditampilkan di UI.
contoh pertama.html
< div kelas = 'slds-var-m-around_medium' >
< B > Nama buah: < / B > {buah}
< / div >
< / kartu petir>
< / templat>
contoh pertama.js
impor { Elemen Petir , melacak } dari 'keberuntungan' ;ekspor bawaan kelas Contoh Pertama meluas Elemen Petir {
@ melacak buah ;
terhubungPanggilan Balik ( ) {
// Menyetel nilai properti ke Mango
ini . buah = 'Buah mangga' ;
}
}
Keluaran:
Tambahkan komponen ini ke halaman 'Rekam' objek apa pun. Di sini kami menambahkannya ke halaman “Catatan Akun”. Anda akan melihat bahwa buahnya adalah “Mangga”.
Contoh 3:
Gunakan kode sebelumnya dan ubah beberapa pernyataan di file “js” dan “html”.
Buat variabel baru yaitu “angka” dengan 500 di file “js”. Tetapkan buah ke “lebih besar dari 500” jika jumlahnya lebih besar dari 500. Jika tidak, tetapkan buah sebagai “sama dengan 500”.
contoh pertama.html
< div kelas = 'slds-var-m-around_medium' >
< B > Biaya: < / B > {buah}
< / div >
< / kartu petir>
< / templat>
contoh pertama.js
@ melacak buah ;terhubungPanggilan Balik ( ) {
biarkan nomor = 500 ;
jika ( nomor > 500 ) {
ini . buah = 'lebih dari 500' ;
}
kalau tidak {
ini . buah = 'sama dengan 500' ;
}
}
Keluaran:
Jumlahnya adalah 500. Jadi, buah tersebut mempunyai hasil “sama dengan 500”.
Contoh 4:
Dalam skenario ini, kami mengembalikan catatan akun (objek Akun) menggunakan metode connectcallback().
- Pertama, kami menulis kelas Apex yang mengembalikan daftar 10 akun pertama dengan bidang Id, Nama, Industri, dan Peringkat
- Selanjutnya, kita melacak akun dan mengembalikannya dalam metode connectcallback() dengan memanggil metode dari kelas Apex.
- Dalam file HTML, kami menggunakannya untuk setiap arahan yang mengulangi akun dan mengembalikan Nama dan Industri.
Data Akun.apxc
publik dengan berbagi kelas AccountData {@AuraEnabled(dapat di-cache=benar)
Daftar statis publik
Daftar
kembalikan Daftar akun;
}
}
contoh kedua.html
< div kelas = 'slds-var-m-around_medium' >
< P kunci = { akun_rekaman. Pengenal } < B > Akun: < / B > {account_rec.Name} < B > Industri: < / B > {account_rec.Industri} < / P >
< / templat>
< / templat>
< / div >
< / kartu petir>
< / templat>
contoh kedua.js
Impor returnAcc dari Apex kelas :impor returnAcc dari '@salesforce/apex/AccountData.returnAcc' ;
Menulis ini kode di dalam 'js' kelas :
@ melacak akun ;
@ kesalahan trek ;
terhubungPanggilan Balik ( ) {
kembaliAcc ( )
// Kembalikan akunnya
. Kemudian ( hasil => {
ini . akun = hasil ;
ini . kesalahan = belum diartikan ;
} )
. menangkap ( kesalahan => {
ini . kesalahan = kesalahan ;
ini . akun = belum diartikan ;
} ) ;
}
Keluaran:
10 catatan akun pertama dikembalikan dengan Nama Akun dan Industri.
Kesimpulan
Sekarang, Anda dapat menggunakan metode connectcallback() dalam banyak kasus saat bekerja dengan data Apex di LWC. Dalam panduan ini, kita membahas cara menyetel nilai properti menggunakan connectcallback() dan menyertakan Apex di dalamnya. Untuk pemahaman yang lebih baik, pertama-tama kami memberikan contoh yang menunjukkan metode konstruktor() dan connectcallback(). Anda perlu memeriksa halaman web Anda dan melihatnya di konsol.