மின்னல் வலை கூறு (LWC) DOM இல் கூறு/களை செருகவும், அதை வழங்கவும் மற்றும் DOM இலிருந்து கூறு/களை அகற்றவும் அதன் சொந்த LifeCycle உள்ளது. இணைக்கப்பட்ட கால்பேக்() (மவுண்டிங் கட்டத்தில்) என்பது லைஃப்சைக்கிள் முறைகளில் ஒன்றாகும், இது டிஓஎம்மில் கூறு செருகப்படும்போது செயல்படுத்தப்படுகிறது. இந்த வழிகாட்டியில், இணைப்பு அழைப்பு() மற்றும் இந்த முறையை உள்ளடக்கிய பல்வேறு காட்சிகளை எடுத்துக்காட்டுகளுடன் விவாதிப்போம்.
- கன்ஸ்ட்ரக்டர்() என்பது லைஃப்சைக்கிள் ஹூக்கில் முதல் முறையாகும், இது 'கூறு' நிகழ்வை உருவாக்கும்போது அழைக்கப்படுகிறது. இந்த கட்டத்தில் உள்ள கூறு பண்புகள் தயாராக இருக்காது. நீங்கள் ஹோஸ்ட் உறுப்பை அணுக விரும்பினால், நாங்கள் 'this.template' ஐப் பயன்படுத்த வேண்டும். இந்த கட்டத்தில் குழந்தை கூறுகள் இல்லாததால், குழந்தை கூறுகளையும் எங்களால் அணுக முடியாது. இந்த முறையில் Super() பயன்படுத்தப்படுகிறது.
- இணைக்கப்பட்ட கால்பேக்() என்பது இரண்டாவது முறை (கட்டம் 2) ஆகும், இது DOM இல் ஒரு உறுப்பு செருகப்படும் போது அழைக்கப்படுகிறது. இந்த வழக்கில், கொக்கி பெற்றோரிடமிருந்து குழந்தைக்கு பாய்கிறது. இந்த கட்டத்தில் உள்ள கூறு பண்புகள் தயாராக இருக்காது. நீங்கள் ஹோஸ்ட் உறுப்பை அணுக விரும்பினால், நாங்கள் 'this.template' ஐப் பயன்படுத்த வேண்டும். இந்த கட்டத்தில் குழந்தை கூறுகள் இல்லாததால், குழந்தை கூறுகளையும் எங்களால் அணுக முடியாது.
- விடாது (): எக்ஸ்ட் ஃபேஸ் ரெண்டரிங் ஆகும். பெற்றோர் கூறு ரெண்டர் செய்யப்படுகிறது, பின்னர் குழந்தை கூறு இருந்தால் அது வழங்கும். பெற்றோரை ரெண்டரிங் செய்த பிறகு, அது குழந்தை கூறுக்கு (கட்டமைப்பாளர், இணைக்கப்பட்ட அழைப்பு, ரெண்டர்) சென்று பெற்றோரின் அதே படிகளைப் பின்பற்றுகிறது.
- renderedCallback (): கூறுகளின் ரெண்டரிங் முடிந்ததும், இதற்குப் பிறகு நீங்கள் எந்த செயல்பாட்டையும் செய்ய விரும்பினால், இந்த முறை அழைக்கப்படுகிறது.
- துண்டிக்கப்பட்ட கால்பேக் (): இந்த கட்டத்தில், உறுப்பு DOM இலிருந்து அகற்றப்பட்டது (இணைக்கப்பட்ட அழைப்பிற்கு எதிரே()).
- லைஃப்சைக்கிளில் பிழை ஏற்பட்டால் பிழை அழைப்பு() என்று அழைக்கப்படுகிறது.
இணைக்கப்பட்ட அழைப்பு() அமைப்பு
இணைக்கப்பட்ட அழைப்பைப் பயன்படுத்துதல்():
- ஒரு மாறியை வரையறுத்து சொத்து மதிப்பை அமைக்கவும்.
- அதன் உள்ளே இருக்கும் அபெக்ஸை அழைக்கவும்.
- நிகழ்வுகளை உருவாக்கி அனுப்பவும்.
- UI API ஐ அழைக்கலாம்.
- அதன் உள்ளே வழிசெலுத்தல் சேவை.
இது ஜாவாஸ்கிரிப்ட் கோப்பில் பின்வருமாறு குறிப்பிடப்பட வேண்டும்:
இணைக்கப்பட்ட அழைப்பு ( ) {
// செய்…
}
எல்லா எடுத்துக்காட்டுகளும் இந்த 'meta.xml' கோப்பைப் பயன்படுத்துகின்றன. ஒவ்வொரு உதாரணத்திலும் இதை நாங்கள் குறிப்பிட மாட்டோம். LWC கூறுகளை உங்கள் பதிவுப் பக்கம், பயன்பாட்டுப் பக்கம் மற்றும் முகப்புப் பக்கத்தில் சேர்க்கலாம்.
பதிப்பு = '1.0' ?>
<வெளிப்படுத்தப்பட்டது> உண்மை < / வெளிப்படுத்தப்பட்டது>
<இலக்குகள்>
<இலக்கு> மின்னல்__பதிவுப்பக்கம் < / இலக்கு>
<இலக்கு> மின்னல்__ஆப்பக்கம் < / இலக்கு>
<இலக்கு> மின்னல்__முகப்பு பக்கம் < / இலக்கு>
< / இலக்குகள்>
< / LightningComponentBundle>
எடுத்துக்காட்டு 1:
UI இல் கூறு ஏற்றப்படும் போது, கட்டமைப்பாளர்() மற்றும் இணைக்கப்பட்ட அழைப்பு() கட்டத்தை நாங்கள் காண்பிப்போம்.
இணைக்கப்பட்டCallBack.html
<வார்ப்புரு><மின்னல் அட்டை தலைப்பு = 'இணைக்கப்பட்ட அழைப்பு' >
< / மின்னல் அட்டை>
< / டெம்ப்ளேட்>
இணைக்கப்பட்டCallBack.js
// மவுண்டிங் பேஸ் - கன்ஸ்ட்ரக்டர்()கட்டமைப்பாளர் ( ) {
அருமை ( )
பணியகம். பதிவு ( 'கட்டமைப்பாளர் அழைக்கப்பட்டார்' )
}
// மவுண்டிங் கட்டம் - இணைக்கப்பட்ட கால்பேக்()
இணைக்கப்பட்ட அழைப்பு ( ) {
பணியகம். பதிவு ( 'connectedCallback அழைக்கப்படுகிறது' )
}
இது பின்வருமாறு தெரிகிறது:
வெளியீடு:
எந்தவொரு பொருளின் 'பதிவு' பக்கத்தில் இந்தக் கூறுகளைச் சேர்க்கவும்.
பக்கத்தை ஆய்வு செய்யுங்கள் (இடதுபுறம் கிளிக் செய்து 'ஆய்வு' என்பதைத் தேர்ந்தெடுக்கவும்). பின்னர், 'கன்சோல்' தாவலுக்குச் செல்லவும்.
எடுத்துக்காட்டு 2:
இந்த எடுத்துக்காட்டில், டிராக் டெக்கரேட்டருடன் பழத்தை உருவாக்கி, இணைக்கப்பட்ட கால்பேக்() முறையில் சொத்து மதிப்பை 'மாம்பழம்' என அமைப்போம். இது UI இல் காட்டப்படும்.
firstExample.html
<வார்ப்புரு><மின்னல் அட்டை தலைப்பு = 'பண்புகளை அமைத்தல்' >
< div வர்க்கம் = 'slds-var-m-around_medium' >
< பி > பழத்தின் பெயர்: < / பி > {பழம்}
< / div >
< / மின்னல் அட்டை>
< / டெம்ப்ளேட்>
firstExample.js
இறக்குமதி { மின்னல் உறுப்பு , தடம் } இருந்து 'அதிர்ஷ்டம்' ;ஏற்றுமதி இயல்புநிலை வர்க்கம் முதல் உதாரணம் நீட்டிக்கிறது மின்னல் உறுப்பு {
@ தடம் பழம் ;
இணைக்கப்பட்ட அழைப்பு ( ) {
// சொத்து மதிப்பை மாம்பழமாக அமைத்தல்
இது . பழம் = 'மாங்கனி' ;
}
}
வெளியீடு:
எந்தவொரு பொருளின் 'பதிவு' பக்கத்தில் இந்தக் கூறுகளைச் சேர்க்கவும். இங்கே நாம் அதை 'கணக்கு பதிவு' பக்கத்தில் சேர்க்கிறோம். பழம் 'மாம்பழம்' என்று பார்ப்பீர்கள்.
எடுத்துக்காட்டு 3:
முந்தைய குறியீட்டைப் பயன்படுத்தி, 'js' மற்றும் 'html' கோப்பில் சில அறிக்கைகளை மாற்றவும்.
'js' கோப்பில் 500 உடன் 'எண்' என்ற புதிய மாறியை உருவாக்கவும். 500ஐ விட அதிகமாக இருந்தால், பழத்தை '500க்கு மேல்' என அமைக்கவும். இல்லையெனில், பழத்தை '500க்கு சமமாக' அமைக்கவும்.
firstExample.html
<வார்ப்புரு><மின்னல் அட்டை தலைப்பு = 'பண்புகளை அமைத்தல்' >
< div வர்க்கம் = 'slds-var-m-around_medium' >
< பி > செலவு: < / பி > {பழம்}
< / div >
< / மின்னல் அட்டை>
< / டெம்ப்ளேட்>
firstExample.js
@ தடம் பழம் ;இணைக்கப்பட்ட அழைப்பு ( ) {
எண்ணை விடுங்கள் = 500 ;
என்றால் ( எண் > 500 ) {
இது . பழம் = '500க்கு மேல்' ;
}
வேறு {
இது . பழம் = '500க்கு சமம்' ;
}
}
வெளியீடு:
எண் 500. எனவே, பழம் '500க்கு சமம்' என்ற முடிவை வைத்திருக்கிறது.
எடுத்துக்காட்டு 4:
இந்தச் சூழ்நிலையில், இணைக்கப்பட்ட கால்பேக்() முறையைப் பயன்படுத்தி கணக்குப் பதிவுகளை (கணக்கு பொருள்) திரும்பப் பெறுகிறோம்.
- முதலில், ஐடி, பெயர், தொழில் மற்றும் மதிப்பீட்டு புலங்களுடன் முதல் 10 கணக்குகளின் பட்டியலை வழங்கும் அபெக்ஸ் வகுப்பை எழுதுகிறோம்.
- அடுத்து, நாங்கள் கணக்குகளைக் கண்காணித்து, அபெக்ஸ் வகுப்பிலிருந்து முறையை அழைப்பதன் மூலம் இணைக்கப்பட்ட கால்பேக்() முறையில் அவற்றைத் திருப்பி விடுகிறோம்.
- HTML கோப்பில், கணக்குகளை மீண்டும் கூறும் மற்றும் பெயர் மற்றும் தொழில்துறையை வழங்கும் ஒவ்வொரு கட்டளைக்கும் இதைப் பயன்படுத்துவோம்.
AccountData.apxc
கணக்குத் தரவைப் பகிரும் வகுப்புடன் பொது@AuraEnabled(cacheable=true)
பொது நிலையான பட்டியல்
பட்டியல்
கணக்குப் பட்டியலைத் திருப்பி விடுங்கள்;
}
}
secondExample.html
<வார்ப்புரு><மின்னல் அட்டை தலைப்பு = 'கணக்குகளின் பட்டியலைக் காட்டு' >
< div வர்க்கம் = 'slds-var-m-around_medium' >
<வார்ப்புரு என்றால்: உண்மை = { கணக்குகள் } >
<வார்ப்புரு க்கான : ஒவ்வொன்றும் = { கணக்குகள் } க்கான :உருப்படி = 'கணக்கு_rec' >
< ப முக்கிய = { கணக்கு_rec. ஐடி } >< பி > கணக்கு: < / பி > {account_rec.Name} < பி > தொழில்: < / பி > {account_rec.Industry} < / ப >
< / டெம்ப்ளேட்>
< / டெம்ப்ளேட்>
< / div >
< / மின்னல் அட்டை>
< / டெம்ப்ளேட்>
secondExample.js
அபெக்ஸில் இருந்து returnAcc ஐ இறக்குமதி செய்யவும் வர்க்கம் :இறக்குமதி இருந்து returnAcc '@salesforce/apex/AccountData.returnAcc' ;
எழுது இது 'js' க்குள் குறியீடு வர்க்கம் :
@ கணக்குகளை கண்காணிக்கவும் ;
@ தட பிழை ;
இணைக்கப்பட்ட அழைப்பு ( ) {
ரிட்டர்ன்ஏசிசி ( )
// கணக்குகளை திருப்பி அனுப்பு
. பிறகு ( விளைவாக => {
இது . கணக்குகள் = விளைவாக ;
இது . பிழை = வரையறுக்கப்படாத ;
} )
. பிடி ( பிழை => {
இது . பிழை = பிழை ;
இது . கணக்குகள் = வரையறுக்கப்படாத ;
} ) ;
}
வெளியீடு:
முதல் 10 கணக்குப் பதிவுகள் கணக்குப் பெயர் மற்றும் தொழில்துறையுடன் திருப்பி அனுப்பப்படும்.
முடிவுரை
இப்போது, LWC இல் Apex தரவுகளுடன் பணிபுரியும் போது பெரும்பாலான சந்தர்ப்பங்களில் இணைக்கப்பட்ட அழைப்பு() முறையைப் பயன்படுத்தலாம். இந்த வழிகாட்டியில், இணைக்கப்பட்ட கால்பேக்() ஐப் பயன்படுத்தி சொத்து மதிப்பை எவ்வாறு அமைப்பது என்பதை நாங்கள் விவாதித்தோம் மற்றும் அதில் அபெக்ஸைச் சேர்த்துள்ளோம். சிறந்த புரிதலுக்காக, நாங்கள் முதலில் கன்ஸ்ட்ரக்டர்() மற்றும் இணைக்கப்பட்ட கால்பேக்() முறைகளைக் காட்டும் உதாரணத்தை வழங்கினோம். உங்கள் வலைப்பக்கத்தை ஆய்வு செய்து அதை கன்சோலில் பார்க்க வேண்டும்.