Lightning Web Component (LWC) má svoj vlastný životný cyklus na vloženie komponentov do DOM, vykreslenie a odstránenie komponentu/komponentov z DOM. ConnectedCallback() (vo fáze montáže) je jednou z metód životného cyklu, ktorá sa spustí pri vložení komponentu do DOM. V tejto príručke budeme diskutovať o connectioncallback() a rôznych scenároch, ktoré zahŕňajú túto metódu s príkladmi.
- Constructor() je prvá metóda v háku životného cyklu, ktorý sa volá pri vytváraní inštancie „Component“. Vlastnosti komponentov v tejto fáze nebudú pripravené. Ak chcete získať prístup k prvku hostiteľa, musíme použiť „this.template“. Keďže podradené komponenty v tejto fáze nebudú existovať, nemáme prístup ani k podradeným komponentom. V tejto metóde sa používa Super().
- Connectcallback() je druhá metóda (fáza 2), ktorá sa volá po vložení prvku do DOM. V tomto prípade háčik prúdi z rodiča na dieťa. Vlastnosti komponentov v tejto fáze nebudú pripravené. Ak chcete získať prístup k prvku hostiteľa, musíme použiť „this.template“. Keďže podradené komponenty v tejto fáze nebudú existovať, nemáme prístup ani k podradeným komponentom.
- vykresliť (): Ext fáza je vykresľovanie. Rodičovský komponent sa vykreslí a potom sa vykreslí podradený komponent, ak existuje. Po vykreslení rodiča prejde do podradeného komponentu (konštruktor, pripojené spätné volanie, vykreslenie) a vykoná rovnaké kroky ako rodič.
- vykreslené spätné volanie (): Keď je vykreslenie komponentu dokončené a vy chcete vykonať akúkoľvek operáciu po tomto, zavolá sa táto metóda.
- odpojené spätné volanie (): V tejto fáze je prvok odstránený z DOM (opak na connectcallback()).
- ErrorCallback() sa volá, keď sa chyba vyskytne v životnom cykle.
Štruktúra Connectedcallback().
Použitie pripojeného spätného volania ():
- Definujte premennú a nastavte hodnotu vlastnosti.
- Zavolajte v nej Apex.
- Vytvárajte a odosielajte udalosti.
- Rozhranie UI API je možné zavolať.
- Navigačná služba vo vnútri.
Musí byť špecifikovaný v súbore JavaScript takto:
spojené spätné volanie ( ) {
// robiť…
}
Všetky príklady využívajú tento súbor „meta.xml“. Nebudeme to špecifikovať v každom príklade. Komponenty LWC je možné pridať na vašu stránku záznamu, stránku aplikácie a domovskú stránku.
verzia = '1,0' ?>
< / ciele>
< / LightningComponentBundle>
Príklad 1:
Konštruktor() a fázu connectcallback() predvedieme, keď sa komponent načíta do používateľského rozhrania.
pripojenýCallBack.html
<šablóna>< / blesková karta>
< / šablóna>
pripojenýCallBack.js
// Fáza pripojenia - konstruktor()konštruktér ( ) {
Super ( )
konzoly. log ( 'volal sa konštruktér' )
}
// Fáza montáže - connectCallback()
pripojené spätné volanie ( ) {
konzoly. log ( 'connectedCallback volal' )
}
Vyzerá to takto:
Výkon:
Pridajte tento komponent na stránku „Záznam“ akéhokoľvek objektu.
Skontrolujte stránku (kliknite doľava a vyberte „Skontrolovať“). Potom prejdite na kartu „Konzola“.
Príklad 2:
V tomto príklade vytvoríme ovocie s dekorátorom stopy a v metóde connectcallback() nastavíme hodnotu vlastnosti na „Mango“. Toto sa zobrazuje v používateľskom rozhraní.
firstExample.html
<šablóna>< div trieda = 'slds-var-m-around_medium' >
< b > Názov ovocia: < / b > {ovocie}
< / div >
< / blesková karta>
< / šablóna>
firstExample.js
importovať { LightningElement , trať } od 'šťastie' ;export predvolená trieda Prvý príklad predlžuje LightningElement {
@ sledovať ovocie ;
pripojené spätné volanie ( ) {
// Nastavenie hodnoty vlastnosti na Mango
toto . ovocie = 'Mango' ;
}
}
Výkon:
Pridajte tento komponent na stránku „Záznam“ akéhokoľvek objektu. Tu ho pridáme na stránku „Záznam účtu“. Uvidíte, že ovocie je „Mango“.
Príklad 3:
Využite predchádzajúci kód a upravte niektoré príkazy v súboroch „js“ a „html“.
Vytvorte novú premennú, ktorá je „číslo“ s 500 v súbore „js“. Ak je číslo väčšie ako 500, nastavte ovocie na „väčšie ako 500“. V opačnom prípade nastavte ovocie na „rovná sa 500“.
firstExample.html
<šablóna>< div trieda = 'slds-var-m-around_medium' >
< b > Cena: < / b > {ovocie}
< / div >
< / blesková karta>
< / šablóna>
firstExample.js
@ sledovať ovocie ;pripojené spätné volanie ( ) {
nechať číslo = 500 ;
ak ( číslo > 500 ) {
toto . ovocie = 'viac ako 500' ;
}
inak {
toto . ovocie = 'rovná sa 500' ;
}
}
Výkon:
Číslo je 500. Takže ovocie drží výsledok ako „rovná sa 500“.
Príklad 4:
V tomto scenári vrátime záznamy účtu (objekt účtu) pomocou metódy connectedcallback().
- Najprv napíšeme triedu Apex, ktorá vráti zoznam prvých 10 účtov s poľami Id, Name, Industry a Rating
- Ďalej sledujeme účty a vraciame ich v metóde connectedcallback() volaním metódy z triedy Apex.
- V súbore HTML ho používame pre každú direktívu, ktorá iteruje účty a vracia názov a odvetvie.
AccountData.apxc
public with sharing class AccountData {@AuraEnabled(cacheable=true)
public static List
List
vrátiť zoznam účtov;
}
}
secondExample.html
<šablóna>< div trieda = 'slds-var-m-around_medium' >
<šablóna if:true = { účtov } >
<šablóna pre :každý = { účtov } pre :položka = 'account_rec' >
< p kľúč = { account_rec. Id } < b > účet: < / b > {account_rec.Name} < b > Priemysel: < / b > {account_rec.Industry} < / p >
< / šablóna>
< / šablóna>
< / div >
< / blesková karta>
< / šablóna>
secondExample.js
Importujte returnAcc z Apexu trieda :importovať returnAcc from '@salesforce/apex/AccountData.returnAcc' ;
Napíšte toto kód v „js“ trieda :
@ sledovať účty ;
@ chyba stopy ;
pripojené spätné volanie ( ) {
returnAcc ( )
// Vrátiť účty
. potom ( výsledok => {
toto . účtov = výsledok ;
toto . chyba = nedefinované ;
} )
. chytiť ( chyba => {
toto . chyba = chyba ;
toto . účtov = nedefinované ;
} ) ;
}
Výkon:
Prvých 10 záznamov účtu sa vráti s názvom účtu a odvetvím.
Záver
Teraz môžete vo väčšine prípadov použiť metódu connectcallback() pri práci s údajmi Apex v LWC. V tejto príručke sme diskutovali o tom, ako nastaviť hodnotu vlastnosti pomocou connectcallback() a zahrnúť do nej Apex. Pre lepšie pochopenie sme najprv poskytli príklad, ktorý ukázal metódy constructor() a connectedcallback(). Musíte skontrolovať svoju webovú stránku a zobraziť ju v konzole.