يحتوي Lightning Web Component (LWC) على دورة حياة خاصة به لإدراج المكون/المكونات في DOM، وعرضه، وإزالة المكون/المكونات من DOM. يُعد ConnectCallback() (في مرحلة التثبيت) أحد أساليب LifeCycle التي يتم تشغيلها عند إدراج المكون في DOM. في هذا الدليل، سنناقش Connectioncallback() والسيناريوهات المختلفة التي تتضمن هذه الطريقة مع الأمثلة.
- إن المُنشئ () هو الأسلوب الأول في ربط دورة الحياة والذي يتم استدعاؤه عند إنشاء مثيل 'المكون'. خصائص المكون في هذه المرحلة لن تكون جاهزة. إذا كنت تريد الوصول إلى العنصر المضيف، فنحن بحاجة إلى استخدام 'this.template'. وبما أن المكونات الفرعية في هذه المرحلة لن تكون موجودة، فلن نتمكن من الوصول إلى المكونات الفرعية أيضًا. يتم استخدام Super() في هذه الطريقة.
- الدالة Connectcallback() هي الطريقة الثانية (المرحلة 2) والتي يتم استدعاؤها عند إدراج عنصر في DOM. في هذه الحالة، ينتقل الخطاف من الوالدين إلى الطفل. خصائص المكون في هذه المرحلة لن تكون جاهزة. إذا كنت تريد الوصول إلى العنصر المضيف، فنحن بحاجة إلى استخدام 'this.template'. وبما أن المكونات الفرعية في هذه المرحلة لن تكون موجودة، فلن نتمكن من الوصول إلى المكونات الفرعية أيضًا.
- يجعل (): يتم تقديم المرحلة تحويلة. يتم عرض المكون الأصلي ثم يتم عرض المكون الفرعي إذا كان موجودًا. بعد تقديم العنصر الأصلي، ينتقل إلى المكون الفرعي (المنشئ، رد الاتصال المتصل، العرض) ويتبع نفس الخطوات التي اتبعها العنصر الأصلي.
- رد الاتصال (): عند اكتمال عرض المكون وتريد تنفيذ أي عملية بعد ذلك، يتم استدعاء هذه الطريقة.
- غير متصل (): في هذه المرحلة، تتم إزالة العنصر من DOM (عكس Connectcallback()).
- يتم استدعاء errorCallback() عند حدوث الخطأ في LifeCycle.
بنية Connectedcallback()
باستخدام رد الاتصال المتصل ():
- تحديد متغير وتعيين قيمة الخاصية.
- اتصل بالقمة بداخلها.
- إنشاء وإرسال الأحداث.
- يمكن استدعاء واجهة برمجة التطبيقات (UI).
- خدمة الملاحة بداخله.
ويجب تحديده في ملف JavaScript كما يلي:
ConnectCallback ( ) {
// يفعل…
}
تستخدم كافة الأمثلة ملف 'meta.xml' هذا. لن نحدد ذلك في كل مثال. يمكن إضافة مكونات LWC إلى صفحة السجل وصفحة التطبيق والصفحة الرئيسية.
إصدار = '1.0' ?>
<مكشوف> حقيقي < / مكشوف>
<الأهداف>
<الهدف> Lightning__RecordPage < / الهدف>
<الهدف> Lightning__AppPage < / الهدف>
<الهدف> Lightning__الصفحة الرئيسية < / الهدف>
< / الأهداف>
< / حزمة LightningComponent>
مثال 1:
سنوضح مرحلة الإنشاء () ومرحلة رد الاتصال () عندما يتم تحميل المكون على واجهة المستخدم.
ConnectCallBack.html
<قالب><بطاقة البرق عنوان = 'رد اتصال متصل' >
< / بطاقة البرق>
< / القالب>
ConnectCallBack.js
// مرحلة التركيب - المُنشئ ()البناء ( ) {
ممتاز ( )
وحدة التحكم. سجل ( 'المنشئ يسمى' )
}
// مرحلة التركيب - ConnectCallback()
ConnectCallback ( ) {
وحدة التحكم. سجل ( 'تم استدعاء رد الاتصال المتصل' )
}
يبدو كما يلي:
انتاج:
أضف هذا المكون إلى صفحة 'السجل' لأي كائن.
افحص الصفحة (انقر على اليسار وحدد 'فحص'). ثم انتقل إلى علامة التبويب 'وحدة التحكم'.
مثال 2:
في هذا المثال، سنقوم بإنشاء فاكهة باستخدام مُزيّن المسار ونضبط قيمة الخاصية على 'Mango' داخل التابعconnectcallback(). يتم عرض هذا على واجهة المستخدم.
firstExample.html
<قالب><بطاقة البرق عنوان = 'إعداد الخصائص' >
< شعبة فصل = 'slds-var-m-around_medium' >
< ب > اسم الفاكهة: < / ب > {فاكهة}
< / شعبة >
< / بطاقة البرق>
< / القالب>
firstExample.js
يستورد { LightningElement , مسار } من 'حظ' ;يصدّر تقصير فصل المثال الأول يمتد LightningElement {
@ تتبع الفاكهة ;
ConnectCallback ( ) {
// ضبط قيمة الخاصية على مانجو
هذا . فاكهة = 'مانجو' ;
}
}
انتاج:
أضف هذا المكون إلى صفحة 'السجل' لأي كائن. وهنا نضيفه إلى صفحة 'سجل الحساب'. سترى أن الفاكهة هي 'المانجو'.
مثال 3:
الاستفادة من الكود السابق وتعديل بعض العبارات في ملف “js” و “html”.
قم بإنشاء متغير جديد وهو 'number' برقم 500 في ملف 'js'. اضبط الفاكهة على 'أكبر من 500' إذا كان الرقم أكبر من 500. وإلا، فاضبط الفاكهة على 'يساوي 500'.
firstExample.html
<قالب><بطاقة البرق عنوان = 'إعداد الخصائص' >
< شعبة فصل = 'slds-var-m-around_medium' >
< ب > يكلف: < / ب > {فاكهة}
< / شعبة >
< / بطاقة البرق>
< / القالب>
firstExample.js
@ تتبع الفاكهة ;ConnectCallback ( ) {
اسمحوا رقم = 500 ;
لو ( رقم > 500 ) {
هذا . فاكهة = 'أكبر من 500' ;
}
آخر {
هذا . فاكهة = 'يساوي 500' ;
}
}
انتاج:
الرقم هو 500. لذا فإن الفاكهة تحمل النتيجة 'تساوي 500'.
مثال 4:
في هذا السيناريو، نقوم بإرجاع سجلات الحساب (كائن الحساب) باستخدام طريقة Connectcallback().
- أولاً، نكتب فئة Apex التي تُرجع قائمة الحسابات العشرة الأولى مع حقول المعرف والاسم والصناعة والتقييم
- بعد ذلك، نقوم بتتبع الحسابات وإعادتها في طريقة Connectcallback() عن طريق استدعاء الطريقة من فئة Apex.
- في ملف HTML، نستخدمه لكل توجيه يكرر الحسابات ويعيد الاسم والصناعة.
AccountData.apxc
عام مع مشاركة فئة AccountData {@AuraEnabled(قابل للتخزين المؤقت=صحيح)
القائمة الثابتة العامة
List
قائمة حسابات الإرجاع؛
}
}
SecondExample.html
<قالب><بطاقة البرق عنوان = 'عرض قائمة الحسابات' >
< شعبة فصل = 'slds-var-m-around_medium' >
<قالب إذا: صحيح = { حسابات } >
<قالب ل :كل = { حسابات } ل :غرض = 'account_rec' >
< ص مفتاح = { account_rec. بطاقة تعريف } >< ب > حساب: < / ب > {account_rec.Name} &نبسب; &نبسب; < ب > صناعة: < / ب > {account_rec.Industry} < / ص >
< / القالب>
< / القالب>
< / شعبة >
< / بطاقة البرق>
< / القالب>
SecondExample.js
قم باستيراد returnAcc من Apex فصل :يستورد العودة من '@salesforce/apex/AccountData.returnAcc' ;
يكتب هذا الكود داخل 'js' فصل :
@ تتبع الحسابات ;
@ خطأ المسار ;
ConnectCallback ( ) {
returnAcc ( )
// إرجاع الحسابات
. ثم ( نتيجة => {
هذا . حسابات = نتيجة ;
هذا . خطأ = غير معرف ;
} )
. يمسك ( خطأ => {
هذا . خطأ = خطأ ;
هذا . حسابات = غير معرف ;
} ) ;
}
انتاج:
يتم إرجاع سجلات الحسابات العشرة الأولى مع اسم الحساب والصناعة.
خاتمة
الآن، يمكنك استخدام طريقةconnectcallback() في معظم الحالات أثناء العمل مع بيانات Apex في LWC. في هذا الدليل، ناقشنا كيفية تعيين قيمة الخاصية باستخدامconnectallback() وقمنا بتضمين Apex فيها. من أجل فهم أفضل، قدمنا أولاً مثالاً يوضح طريقتي الإنشاء () وconnectcallback (). تحتاج إلى فحص صفحة الويب الخاصة بك وعرضها في وحدة التحكم.