Komponent Lightning Web (LWC) ma swój własny cykl życia umożliwiający wstawienie komponentu(ów) do modelu DOM, renderowanie go i usunięcie komponentu(ów) z modelu DOM. ConnectedCallback() (w fazie montowania) to jedna z metod cyklu życia, która jest uruchamiana, gdy komponent jest wstawiany do modelu DOM. W tym przewodniku wraz z przykładami omówimy metodę Connectioncallback() i różne scenariusze obejmujące tę metodę.
- Konstruktor() jest pierwszą metodą haka cyklu życia, która jest wywoływana podczas tworzenia instancji „Komponentu”. Właściwości komponentu na tym etapie nie będą gotowe. Jeśli chcesz uzyskać dostęp do elementu hosta, musimy użyć „this.template”. Ponieważ komponenty podrzędne na tym etapie nie będą istnieć, nie będziemy mogli uzyskać dostępu również do komponentów podrzędnych. W tej metodzie używana jest funkcja Super().
- Connectedcallback() to druga metoda (faza 2), która jest wywoływana, gdy element jest wstawiany do DOM. W tym przypadku hak przepływa od rodzica do dziecka. Właściwości komponentu na tym etapie nie będą gotowe. Jeśli chcesz uzyskać dostęp do elementu hosta, musimy użyć „this.template”. Ponieważ komponenty podrzędne na tym etapie nie będą istnieć, nie będziemy mogli uzyskać dostępu również do komponentów podrzędnych.
- renderowanie (): Faza zewnętrzna to renderowanie. Renderowany jest komponent nadrzędny, a następnie komponent podrzędny, jeśli istnieje. Po wyrenderowaniu elementu nadrzędnego przechodzi do komponentu podrzędnego (konstruktor, połączone wywołanie zwrotne, render) i wykonuje te same kroki, co element nadrzędny.
- renderowane oddzwonienie (): Po zakończeniu renderowania komponentu i po tym chcesz wykonać jakąkolwiek operację, wywoływana jest ta metoda.
- rozłączonyOddzwonienie (): Na tym etapie element jest usuwany z DOM (w przeciwieństwie do metody connectcallback()).
- Funkcja errorCallback() jest wywoływana, gdy w cyklu życia wystąpi błąd.
Struktura Connectedcallback().
Korzystanie z połączonego wywołania zwrotnego ():
- Zdefiniuj zmienną i ustaw wartość właściwości.
- Wezwij znajdujący się w nim Apex.
- Twórz i wysyłaj zdarzenia.
- Można wywołać interfejs API interfejsu użytkownika.
- Wewnątrz niego usługa nawigacji.
Należy go określić w pliku JavaScript w następujący sposób:
podłączonyOddzwonienie ( ) {
// Do…
}
Wszystkie przykłady wykorzystują plik „meta.xml”. Nie będziemy tego określać w każdym przykładzie. Komponenty LWC można dodać do strony rekordu, strony aplikacji i strony głównej.
wersja = „1,0” ?>
< / cele>
< / Pakiet LightningComponent>
Przykład 1:
Zademonstrujemy fazę konstruktora() i połączonego wywołania zwrotnego(), gdy komponent zostanie załadowany w interfejsie użytkownika.
połączonyCallBack.html
< / karta-błyskawica>
< / szablon>
podłączonyCallBack.js
// Faza montażu - konstruktor()konstruktor ( ) {
Super ( )
konsola. dziennik ( „konstruktor nazywany” )
}
// Faza montażu - podłączonyCallback()
podłączonyOddzwonienie ( ) {
konsola. dziennik ( „Wywołano połączenie zwrotne połączone” )
}
Wygląda to następująco:
Wyjście:
Dodaj ten komponent do strony „Rekord” dowolnego obiektu.
Sprawdź stronę (kliknij w lewo i wybierz „Sprawdź”). Następnie przejdź do zakładki „Konsola”.
Przykład 2:
W tym przykładzie utworzymy owoc za pomocą dekoratora ścieżek i ustawimy wartość właściwości na „Mango” w metodzie connectcallback(). Jest to wyświetlane w interfejsie użytkownika.
pierwszyPrzykład.html
< div klasa = „slds-var-m-around_medium” >
< B > Nazwa owocu: < / B > {owoc}
< / div >
< / karta-błyskawica>
< / szablon>
pierwszyPrzykład.js
import { Element Błyskawicy , ścieżka } z 'szczęście' ;eksport domyślny klasa Pierwszy przykład rozciąga się Element Błyskawicy {
@ śledzić owoce ;
podłączonyOddzwonienie ( ) {
// Ustawienie wartości właściwości na Mango
Ten . owoc = 'Mango' ;
}
}
Wyjście:
Dodaj ten komponent do strony „Rekord” dowolnego obiektu. Tutaj dodajemy go do strony „Rekord konta”. Zobaczysz, że owocem jest „Mango”.
Przykład 3:
Wykorzystaj poprzedni kod i zmodyfikuj niektóre instrukcje w plikach „js” i „html”.
Utwórz nową zmienną o nazwie „liczba” z liczbą 500 w pliku „js”. Jeśli liczba jest większa niż 500, ustaw owoc na „większy niż 500”. W przeciwnym razie ustaw owoc jako „równy 500”.
pierwszyPrzykład.html
< div klasa = „slds-var-m-around_medium” >
< B > Koszt: < / B > {owoc}
< / div >
< / karta-błyskawica>
< / szablon>
pierwszyPrzykład.js
@ śledzić owoce ;podłączonyOddzwonienie ( ) {
niech numer = 500 ;
Jeśli ( numer > 500 ) {
Ten . owoc = „większa niż 500” ;
}
w przeciwnym razie {
Ten . owoc = „równe 500” ;
}
}
Wyjście:
Liczba wynosi 500. Zatem owoc przyjmuje wynik jako „równy 500”.
Przykład 4:
W tym scenariuszu zwracamy rekordy konta (obiekt Account) za pomocą metody connectcallback().
- Najpierw piszemy klasę Apex, która zwraca listę pierwszych 10 kont z polami Identyfikator, Nazwa, Branża i Ocena
- Następnie śledzimy konta i zwracamy je w metodzie connectcallback() wywołując metodę z klasy Apex.
- W pliku HTML używamy go dla każdej dyrektywy, która iteruje konta i zwraca nazwę i branżę.
Dane konta.apxc
public z klasą udostępniania AccountData {@AuraEnabled (cacheable = true)
public static List
List
zwróć listę kont;
}
}
drugiPrzykład.html
< div klasa = „slds-var-m-around_medium” >
< P klucz = { konto_rec. ID } >< B > Konto: < / B > {account_rec.Name} < B > Przemysł: < / B > {account_rec.Industry} < / P >
< / szablon>
< / szablon>
< / div >
< / karta-błyskawica>
< / szablon>
drugiPrzykład.js
Zaimportuj returnAcc z Apex klasa :import powrótAcc z „@salesforce/apex/AccountData.returnAcc” ;
Pisać Ten kod w „js” klasa :
@ śledzić konta ;
@ błąd śledzenia ;
podłączonyOddzwonienie ( ) {
powrótAkc ( )
// Zwróć konta
. Następnie ( wynik => {
Ten . konta = wynik ;
Ten . błąd = nieokreślony ;
} )
. złapać ( błąd => {
Ten . błąd = błąd ;
Ten . konta = nieokreślony ;
} ) ;
}
Wyjście:
Zwracanych jest pierwszych 10 rekordów konta z nazwą konta i branżą.
Wniosek
Teraz w większości przypadków możesz używać metody connectcallback() podczas pracy z danymi Apex w LWC. W tym przewodniku omówiliśmy, jak ustawić wartość właściwości za pomocą funkcji connectcallback() i uwzględniliśmy w niej Apex. Aby lepiej zrozumieć, najpierw podaliśmy przykład pokazujący metody konstruktor() i connectcallback(). Musisz sprawdzić swoją stronę internetową i wyświetlić ją w konsoli.