Lightning Web Component (LWC) má svůj vlastní LifeCycle pro vložení komponenty/složek do DOM, vykreslení a odstranění komponent/složek z DOM. ConnectedCallback() (v montážní fázi) je jednou z metod LifeCycle, která se spustí, když je komponenta vložena do DOM. V této příručce probereme connectioncallback() a různé scénáře, které tuto metodu zahrnují, s příklady.
- Konstruktor() je první metoda v háku životního cyklu, která se volá při vytvoření instance „Component“. Vlastnosti součásti v této fázi nebudou připraveny. Pokud chcete získat přístup k hostitelskému prvku, musíme použít „this.template“. Protože podřízené komponenty v této fázi nebudou existovat, nemáme přístup ani k podřízeným komponentám. V této metodě se používá Super().
- Connectcallback() je druhá metoda (fáze 2), která se volá, když je prvek vložen do DOM. V tomto případě hák proudí z rodiče na dítě. Vlastnosti součásti v této fázi nebudou připraveny. Pokud chcete získat přístup k hostitelskému prvku, musíme použít „this.template“. Protože podřízené komponenty v této fázi nebudou existovat, nemáme přístup ani k podřízeným komponentám.
- poskytnout (): Ext fáze se vykresluje. Rodičovská komponenta se vykreslí a potom se vykreslí podřízená komponenta, pokud existuje. Po vykreslení nadřazeného prvku přejde do podřízené komponenty (konstruktor, připojené zpětné volání, vykreslení) a provede stejné kroky jako nadřazený prvek.
- vykreslené zpětné volání (): Tato metoda se zavolá, když je vykreslování komponenty dokončeno a chcete provést jakoukoli operaci poté.
- odpojeno zpětné volání (): V této fázi je prvek odstraněn z DOM (opak připojeného zpětného volání ()).
- ErrorCallback() je volána, když dojde k chybě v LifeCycle.
Struktura Connectedcallback().
Pomocí funkce connectedcallback():
- Definujte proměnnou a nastavte hodnotu vlastnosti.
- Zavolejte Apex uvnitř.
- Vytvořte a odešlete události.
- UI API lze volat.
- Navigační služba uvnitř.
Musí být specifikován v souboru JavaScript takto:
připojeno zpětné volání ( ) {
// dělat…
}
Všechny příklady využívají tento soubor „meta.xml“. Nebudeme to u každého příkladu specifikovat. Komponenty LWC lze přidat na stránku záznamu, stránku aplikace a domovskou stránku.
verze = '1,0' ?>
< / cíle>
< / LightningComponentBundle>
Příklad 1:
Fáze konstruktoru() a connectcallback() předvedeme při načtení komponenty do uživatelského rozhraní.
připojenoCallBack.html
<šablona>< / blesková karta>
< / šablona>
připojenoCallBack.js
// Fáze připojení - konstruktor()konstruktér ( ) {
super ( )
řídicí panel. log ( 'zvaný konstruktér' )
}
// Fáze připojení - connectCallback()
připojeno zpětné volání ( ) {
řídicí panel. log ( 'connectedCallback voláno' )
}
Vypadá to následovně:
Výstup:
Přidejte tuto komponentu na stránku „Záznam“ libovolného objektu.
Prohlédněte si stránku (klikněte doleva a vyberte „Zkontrolovat“). Poté přejděte na kartu „Konzola“.
Příklad 2:
V tomto příkladu vytvoříme ovoce s dekorátorem stopy a v metodě connectedcallback() nastavíme hodnotu vlastnosti na „Mango“. Toto je zobrazeno na uživatelském rozhraní.
firstExample.html
<šablona>< div třída = 'slds-var-m-around_medium' >
< b > Název ovoce: < / b > {ovoce}
< / div >
< / blesková karta>
< / šablona>
firstExample.js
import { LightningElement , dráha } z 'štěstí' ;vývozní výchozí třída První příklad rozšiřuje LightningElement {
@ sledovat ovoce ;
připojeno zpětné volání ( ) {
// Nastavení hodnoty vlastnosti na Mango
tento . ovoce = 'Mango' ;
}
}
Výstup:
Přidejte tuto komponentu na stránku „Záznam“ libovolného objektu. Zde jej přidáme na stránku „Záznam účtu“. Uvidíte, že ovoce je „Mango“.
Příklad 3:
Využijte předchozí kód a upravte některé příkazy v souborech „js“ a „html“.
Vytvořte novou proměnnou, která je „číslo“ s 500 v souboru „js“. Pokud je číslo větší než 500, nastavte ovoce na „větší než 500“. Jinak nastavte ovoce na „rovno 500“.
firstExample.html
<šablona>< div třída = 'slds-var-m-around_medium' >
< b > Náklady: < / b > {ovoce}
< / div >
< / blesková karta>
< / šablona>
firstExample.js
@ sledovat ovoce ;připojeno zpětné volání ( ) {
nechat číslo = 500 ;
-li ( číslo > 500 ) {
tento . ovoce = 'více než 500' ;
}
jiný {
tento . ovoce = 'rovná se 500' ;
}
}
Výstup:
Číslo je 500. Takže ovoce drží výsledek jako „rovná se 500“.
Příklad 4:
V tomto scénáři vrátíme záznamy účtu (objekt účtu) pomocí metody connectedcallback().
- Nejprve napíšeme třídu Apex, která vrátí seznam prvních 10 účtů s poli Id, Name, Industry a Rating
- Dále sledujeme účty a vracíme je v metodě connectedcallback() voláním metody ze třídy Apex.
- V souboru HTML jej používáme pro každou direktivu, která iteruje účty a vrací název a odvětví.
AccountData.apxc
public with sharing class AccountData {@AuraEnabled(cacheable=true)
public static List
List
vrátit seznam účtů;
}
}
secondExample.html
<šablona>< div třída = 'slds-var-m-around_medium' >
<šablona if:true = { účty } >
<šablona pro :každý = { účty } pro :položka = 'account_rec' >
< p klíč = { account_rec. Id } < b > Účet: < / b > {account_rec.Name} < b > Průmysl: < / b > {account_rec.Industry} < / p >
< / šablona>
< / šablona>
< / div >
< / blesková karta>
< / šablona>
secondExample.js
Importujte returnAcc z Apexu třída :import returnAcc od '@salesforce/apex/AccountData.returnAcc' ;
Napsat tento kód v „js“ třída :
@ sledovat účty ;
@ chyba stopy ;
připojeno zpětné volání ( ) {
returnAcc ( )
// Vraťte účty
. pak ( výsledek => {
tento . účty = výsledek ;
tento . chyba = nedefinováno ;
} )
. chytit ( chyba => {
tento . chyba = chyba ;
tento . účty = nedefinováno ;
} ) ;
}
Výstup:
Prvních 10 záznamů účtu se vrátí s názvem účtu a odvětvím.
Závěr
Nyní můžete ve většině případů použít metodu connectcallback() při práci s daty Apex v LWC. V této příručce jsme diskutovali o tom, jak nastavit hodnotu vlastnosti pomocí connectcallback() a zahrnout do ní Apex. Pro lepší pochopení jsme nejprve poskytli příklad, který ukázal metody constructor() a connectedcallback(). Musíte zkontrolovat svou webovou stránku a zobrazit ji v konzole.