Lightning Web Bileşeni (LWC), bileşeni/bileşenleri DOM'a eklemek, oluşturmak ve bileşeni/bileşenleri DOM'dan kaldırmak için kendi Yaşam Döngüsüne sahiptir. ConnectedCallback() (Montaj Aşamasında), bileşen DOM'a eklendiğinde tetiklenen LifeCycle yöntemlerinden biridir. Bu kılavuzda, Connectioncallback() yöntemini ve bu yöntemi içeren farklı senaryoları örneklerle ele alacağız.
- Constructor(), Yaşam Döngüsü kancasında 'Bileşen' örneği oluşturulduğunda çağrılan ilk yöntemdir. Bu aşamadaki bileşen özellikleri hazır olmayacaktır. Eğer host elementine erişmek istiyorsak “this.template” kullanmamız gerekiyor. Bu aşamadaki alt bileşenler mevcut olmayacağından alt bileşenlere de erişemiyoruz. Bu yöntemde Super() kullanılır.
- Connectedcallback(), DOM'a bir öğe eklendiğinde çağrılan ikinci yöntemdir (aşama 2). Bu durumda kanca ebeveynden çocuğa akar. Bu aşamadaki bileşen özellikleri hazır olmayacaktır. Eğer host elementine erişmek istiyorsak “this.template” kullanmamız gerekiyor. Bu aşamadaki alt bileşenler mevcut olmayacağından alt bileşenlere de erişemiyoruz.
- oluşturmak (): Harici aşama görüntüleniyor. Ana bileşen işlenir ve ardından alt bileşen varsa işlenir. Ebeveyni render ettikten sonra alt bileşene (yapıcı, bağlantılı geri çağırma, render) gider ve ebeveyn ile aynı adımları takip eder.
- renderedGeri arama (): Bileşenin render işlemi tamamlandığında ve bundan sonra herhangi bir işlem yapmak istediğinizde bu yöntem çağrılır.
- bağlantı kesildiGeri arama (): Bu aşamada, öğe DOM'dan kaldırılır (connectedcallback()'in tersi).
- LifeCycle'da hata oluştuğunda errorCallback() çağrılır.
Connectedcallback() Yapısı
Connectedcallback() fonksiyonunu kullanarak:
- Bir değişken tanımlayın ve bir özellik değeri ayarlayın.
- İçindeki Apex'i çağırın.
- Olayları oluşturun ve gönderin.
- UI API'si çağrılabilir.
- İçinde navigasyon hizmeti var.
JavaScript dosyasında aşağıdaki gibi belirtilmesi gerekir:
bağlıGeri arama ( ) {
// Yapmak…
}
Tüm örneklerde bu “meta.xml” dosyası kullanılmaktadır. Bunu her örnekte belirtmeyeceğiz. LWC bileşenleri Kayıt Sayfanıza, Uygulama Sayfanıza ve Ana Sayfanıza eklenebilir.
versiyon = '1.0' ?>
< / hedefler>
< / LightningComponentBundle>
Örnek 1:
Bileşen kullanıcı arayüzüne yüklendiğinde, yapıcı() ve bağlantılıgeri çağırma() aşamasını göstereceğiz.
bağlantılıCallBack.html
<şablon>< / yıldırım kartı>
< / şablon>
bağlantılıCallBack.js
// Montaj Aşaması - yapıcı()yapıcı ( ) {
Süper ( )
konsol. kayıt ( 'yapıcı çağrıldı' )
}
// Montaj Aşaması -connectedCallback()
bağlıGeri arama ( ) {
konsol. kayıt ( 'connectedGeri arama çağrıldı' )
}
Aşağıdakine benziyor:
Çıktı:
Bu bileşeni herhangi bir nesnenin “Kayıt” sayfasına ekleyin.
Sayfayı inceleyin (sola tıklayın ve “İncele”yi seçin). Daha sonra “Konsol” sekmesine gidin.
Örnek 2:
Bu örnekte, track dekoratörlü bir meyve yaratacağız ve Connectedcallback() metodunun içindeki özellik değerini “Mango” olarak ayarlayacağız. Bu, kullanıcı arayüzünde görüntülenir.
ilkÖrnek.html
<şablon>< div sınıf = 'slds-var-m-around_medium' >
< B > Meyve adı: < / B > {meyve}
< / div >
< / yıldırım kartı>
< / şablon>
ilkÖrnek.js
içe aktarmak { YıldırımElemanı , izlemek } itibaren 'şans' ;ihracat varsayılan sınıf İlk Örnek uzanır YıldırımElemanı {
@ meyveyi takip etmek ;
bağlıGeri arama ( ) {
// Özellik değerini Mango olarak ayarlıyoruz
Bu . meyve = 'Mango' ;
}
}
Çıktı:
Bu bileşeni herhangi bir nesnenin “Kayıt” sayfasına ekleyin. Burada “Hesap Kaydı” sayfasına ekliyoruz. Meyvenin “Mango” olduğunu göreceksiniz.
Örnek 3:
Önceki kodu kullanın ve “js” ve “html” dosyasındaki bazı ifadeleri değiştirin.
“js” dosyasında 500 ile “number” adında yeni bir değişken oluşturun. Sayı 500'den büyükse meyveyi '500'den büyük' olarak ayarlayın. Aksi takdirde meyveyi '500'e eşit' olarak ayarlayın.
ilkÖrnek.html
<şablon>< div sınıf = 'slds-var-m-around_medium' >
< B > Maliyet: < / B > {meyve}
< / div >
< / yıldırım kartı>
< / şablon>
ilkÖrnek.js
@ meyveyi takip etmek ;bağlıGeri arama ( ) {
numarayı bırak = 500 ;
eğer ( sayı > 500 ) {
Bu . meyve = '500'den büyük' ;
}
başka {
Bu . meyve = '500'e eşit' ;
}
}
Çıktı:
Sayı 500’dür. Yani meyve sonucu “500’e eşit” olarak tutar.
Örnek 4:
Bu senaryoda, linkedcallback() yöntemini kullanarak hesap kayıtlarını (Hesap nesnesi) döndürüyoruz.
- Öncelikle Id, Name, Industry ve Rating alanları ile ilk 10 hesabın listesini döndüren bir Apex sınıfı yazıyoruz.
- Daha sonra, hesapları takip ediyoruz ve Apex sınıfından yöntemi çağırarak, Connectedcallback() yönteminde bunları döndürüyoruz.
- HTML dosyasında, hesapları yineleyen ve Adı ve Sektörü döndüren her yönerge için bunu kullanırız.
AccountData.apxc
AccountData { sınıfını paylaşarak herkese açık@AuraEnabled(önbelleklenebilir=doğru)
genel statik Liste
List
hesap Listesini döndür;
}
}
ikinciÖrnek.html
<şablon>< div sınıf = 'slds-var-m-around_medium' >
<şablon if:true = { hesaplar } >
<şablon için :her biri = { hesaplar } için :öğe = 'hesap_rec' >
< P anahtar = { account_rec. İD } >< B > Hesap: < / B > {account_rec.Name} < B > Endüstri: < / B > {account_rec.Industry} < / P >
< / şablon>
< / şablon>
< / div >
< / yıldırım kartı>
< / şablon>
ikinciÖrnek.js
ReturnAcc'yi Apex'ten içe aktarın sınıf :içe aktarmak Acc'yi şuradan döndür: '@salesforce/apex/AccountData.returnAcc' ;
Yazmak Bu “js” içindeki kod sınıf :
@ hesapları takip et ;
@ takip hatası ;
bağlıGeri arama ( ) {
dönüşAcc ( )
// Hesapları döndür
. Daha sonra ( sonuç => {
Bu . hesaplar = sonuç ;
Bu . hata = Tanımsız ;
} )
. yakalamak ( hata => {
Bu . hata = hata ;
Bu . hesaplar = Tanımsız ;
} ) ;
}
Çıktı:
İlk 10 hesap kaydı, Hesap Adı ve Sektör ile birlikte döndürülür.
Çözüm
Artık LWC'de Apex verileriyle çalışırken bağlantılıcallback() yöntemini çoğu durumda kullanabilirsiniz. Bu kılavuzda, ConnectedCallback() kullanarak özellik değerinin nasıl ayarlanacağını anlattık ve buna Apex'i de dahil ettik. Daha iyi anlaşılabilmesi için öncelikle yapıcı() ve bağlantılıcallback() yöntemlerini gösteren bir örnek verdik. Web sayfanızı incelemeniz ve konsolda görüntülemeniz gerekir.