Ang Lightning Web Component (LWC) ay may sariling LifeCycle upang ipasok ang mga bahagi sa DOM, i-render ito, at alisin ang mga bahagi mula sa DOM. Ang connectedCallback() (sa Mounting Phase) ay isa sa mga paraan ng LifeCycle na pinapagana kapag ang bahagi ay ipinasok sa DOM. Sa gabay na ito, tatalakayin natin ang connectioncallback() at ang iba't ibang senaryo na kinabibilangan ng paraang ito na may mga halimbawa.
- Ang constructor() ay ang unang paraan sa Lifecycle hook na tinatawag kapag ginawa ang 'Component' instance. Ang mga katangian ng bahagi sa yugtong ito ay hindi magiging handa. Kung gusto mong i-access ang host element, kailangan naming gamitin ang “this.template”. Dahil hindi iiral ang mga bahagi ng bata sa yugtong ito, hindi rin namin maa-access ang mga bahagi ng bata. Super() ay ginagamit sa paraang ito.
- Ang connectedcallback() ay ang pangalawang paraan (phase 2) na tinatawag kapag ang isang elemento ay ipinasok sa DOM. Sa kasong ito, ang kawit ay dumadaloy mula sa magulang patungo sa anak. Ang mga katangian ng bahagi sa yugtong ito ay hindi magiging handa. Kung gusto mong i-access ang host element, kailangan naming gamitin ang “this.template”. Dahil hindi iiral ang mga bahagi ng bata sa yugtong ito, hindi rin namin maa-access ang mga bahagi ng bata.
- render (): Nagre-render ang ext phase. Ire-render ang parent component at pagkatapos ay ire-render ang child component kung mayroon ito. Pagkatapos i-render ang magulang, pupunta ito sa child component (constructor, connectedcallback, render) at sinusunod ang parehong mga hakbang gaya ng magulang.
- renderedCallback (): Kapag natapos na ang pag-render ng component at gusto mong magsagawa ng anumang operasyon pagkatapos nito, tinatawag ang paraang ito.
- disconnectedCallback (): Sa yugtong ito, ang elemento ay tinanggal mula sa DOM (kabaligtaran sa connectedcallback()).
- Ang errorCallback() ay tinatawag kapag ang error ay nangyari sa LifeCycle.
Connectedcallback() Structure
Gamit ang connectedcallback():
- Tukuyin ang isang variable at magtakda ng isang halaga ng ari-arian.
- Tawagan ang Apex sa loob nito.
- Lumikha at ipadala ang mga kaganapan.
- Maaaring tawagan ang UI API.
- Navigation service sa loob nito.
Dapat itong tukuyin sa JavaScript file tulad ng sumusunod:
konektadoCallback ( ) {
// gawin…
}
Ginagamit ng lahat ng mga halimbawa ang 'meta.xml' na file na ito. Hindi namin ito tutukuyin sa bawat halimbawa. Maaaring idagdag ang mga bahagi ng LWC sa iyong Record Page, App Page, at Home Page.
bersyon = '1.0' ?>
< / mga target>
< / LightningComponentBundle>
Halimbawa 1:
Ipapakita namin ang constructor() at ang connectedcallback() phase kapag na-load ang component sa UI.
connectedCallBack.html
< / lightning-card>
< / template>
connectedCallBack.js
// Mounting Phase - constructor()tagabuo ( ) {
sobrang ( )
console. log ( 'tinawag na tagabuo' )
}
// Mounting Phase - connectedCallback()
konektadoCallback ( ) {
console. log ( 'connectedCallback called' )
}
Mukhang ang mga sumusunod:
Output:
Idagdag ang bahaging ito sa pahina ng 'Record' ng anumang bagay.
Suriin ang pahina (i-click ang kaliwa at piliin ang 'Suriin'). Pagkatapos, pumunta sa tab na 'Console'.
Halimbawa 2:
Sa halimbawang ito, gagawa kami ng prutas na may track decorator at itatakda ang value ng property sa “Mango” sa loob ng connectedcallback() method. Ito ay ipinapakita sa UI.
firstExample.html
< div klase = 'slds-var-m-around_medium' >
< b > Pangalan ng prutas: < / b > {prutas}
< / div >
< / lightning-card>
< / template>
firstExample.js
angkat { LightningElement , subaybayan } mula sa 'swerte' ;i-export default klase UnangHalimbawa umaabot LightningElement {
@ subaybayan ang prutas ;
konektadoCallback ( ) {
// Pagtatakda ng halaga ng ari-arian sa Mango
ito . prutas = 'mangga' ;
}
}
Output:
Idagdag ang bahaging ito sa pahina ng 'Record' ng anumang bagay. Dito ay idinaragdag namin ito sa pahina ng “Account Record”. Makikita mo na ang prutas ay “Mangga”.
Halimbawa 3:
Gamitin ang nakaraang code at baguhin ang ilang mga pahayag sa 'js' at 'html' na file.
Gumawa ng bagong variable na 'number' na may 500 sa 'js' na file. Itakda ang prutas sa “higit sa 500” kung ang bilang ay higit sa 500. Kung hindi, itakda ang prutas bilang “katumbas ng 500”.
firstExample.html
< div klase = 'slds-var-m-around_medium' >
< b > Gastos: < / b > {prutas}
< / div >
< / lightning-card>
< / template>
firstExample.js
@ subaybayan ang prutas ;konektadoCallback ( ) {
hayaan ang numero = 500 ;
kung ( numero > 500 ) {
ito . prutas = 'higit sa 500' ;
}
iba pa {
ito . prutas = 'katumbas ng 500' ;
}
}
Output:
Ang bilang ay 500. Kaya, hawak ng prutas ang resulta bilang 'katumbas ng 500'.
Halimbawa 4:
Sa sitwasyong ito, ibinabalik namin ang mga tala ng account (Account object) gamit ang connectedcallback() method.
- Una, nagsusulat kami ng klase ng Apex na nagbabalik ng listahan ng unang 10 account na may mga field ng Id, Pangalan, Industriya, at Rating
- Susunod, sinusubaybayan namin ang mga account at ibabalik ang mga ito sa connectedcallback() na pamamaraan sa pamamagitan ng pagtawag sa pamamaraan mula sa klase ng Apex.
- Sa HTML file, ginagamit namin ito para sa bawat direktiba na umuulit sa mga account at nagbabalik ng Pangalan at Industriya.
AccountData.apxc
pampubliko sa pagbabahagi ng klase AccountData {@AuraEnabled(cacheable=true)
pampublikong static na Listahan
List
ibalik ang accountList;
}
}
secondExample.html
< div klase = 'slds-var-m-around_medium' >
= { mga account } >
< p susi = { account_rec. Id } >< b > Account: < / b > {account_rec.Name} < b > Industriya: < / b > {account_rec.Industry} < / p >
< / template>
< / template>
< / div >
< / lightning-card>
< / template>
secondExample.js
I-import ang returnAcc mula sa Apex klase :angkat returnAcc mula sa '@salesforce/apex/AccountData.returnAcc' ;
Sumulat ito code sa loob ng 'js' klase :
@ subaybayan ang mga account ;
@ error sa track ;
konektadoCallback ( ) {
bumalikAcc ( )
// Ibalik ang mga account
. pagkatapos ( resulta => {
ito . mga account = resulta ;
ito . pagkakamali = hindi natukoy ;
} )
. mahuli ( pagkakamali => {
ito . pagkakamali = pagkakamali ;
ito . mga account = hindi natukoy ;
} ) ;
}
Output:
Ang unang 10 talaan ng account ay ibinalik kasama ang Pangalan ng Account at Industriya.
Konklusyon
Ngayon, maaari mong gamitin ang connectedcallback() na pamamaraan sa karamihan ng mga kaso habang nagtatrabaho sa Apex data sa LWC. Sa gabay na ito, tinalakay namin kung paano itakda ang value ng property gamit ang connectedcallback() at isinama ang Apex dito. Para sa mas mahusay na pag-unawa, nagbigay muna kami ng isang halimbawa na nagpakita ng mga pamamaraan ng constructor() at connectedcallback(). Kailangan mong suriin ang iyong webpage at tingnan ito sa console.