LWC – ConnectedCallback()

Lwc Connectedcallback



ל-Lightning Web Component (LWC) יש מחזור חיים משלו כדי להכניס את הרכיב/ים ל-DOM, לעבד אותו ולהסיר את הרכיב/ים מה-DOM. ה-connectedCallback() (בשלב ההרכבה) הוא אחת משיטות LifeCycle המופעלות כאשר הרכיב מוכנס ל-DOM. במדריך זה, נדון ב-connectioncallback() ובתרחישים השונים הכוללים שיטה זו עם דוגמאות.

  1. הקונסטרוקטור() היא השיטה הראשונה בהוק ה-Lifecycle שנקראת כאשר המופע 'Component' נוצר. מאפייני הרכיב בשלב זה לא יהיו מוכנים. אם אתה רוצה לגשת לרכיב המארח, עלינו להשתמש ב-'this.template'. מכיוון שרכיבי הצאצא בשלב זה לא יהיו קיימים, איננו יכולים לגשת גם לרכיבי הצאצא. Super() משמש בשיטה זו.
  2. ה-connectedcallback() היא השיטה השנייה (שלב 2) הנקראת כאשר אלמנט מוכנס ל-DOM. במקרה זה, הקרס זורם מהורה לילד. מאפייני הרכיב בשלב זה לא יהיו מוכנים. אם אתה רוצה לגשת לרכיב המארח, עלינו להשתמש ב-'this.template'. מכיוון שרכיבי הצאצא בשלב זה לא יהיו קיימים, איננו יכולים לגשת גם לרכיבי הצאצא.
  3. לְדַקלֵם (): השלב החיצוני הוא עיבוד. רכיב האב מעובד ואז רכיב הצאצא יעבד אם הוא קיים. לאחר רינדור האב, הוא עובר לרכיב הילד (קונסטרוקטור, connectedcallback, render) ועוקב אחר אותם השלבים כמו האב.
  4. renderedCallback (): כאשר העיבוד של הרכיב הושלם ואתה רוצה לבצע כל פעולה לאחר מכן, שיטה זו נקראת.
  5. מנותק התקשרות חוזרת (): בשלב זה, האלמנט מוסר מה-DOM (מנוגד ל-connectedcallback()).
  6. ה- errorCallback() נקרא כאשר השגיאה מתרחשת ב-LifeCycle.

Connectedcallback() מבנה

שימוש ב-connectedcallback():





  1. הגדר משתנה והגדר ערך מאפיין.
  2. התקשר לאיפקס שבתוכו.
  3. צור ושלח את האירועים.
  4. ניתן לקרוא ל-UI API.
  5. שירות ניווט בתוכו.

יש לציין זאת בקובץ ה-JavaScript כמו הבא:



מחובר התקשרות חזרה ( ) {

// לעשות…

}

כל הדוגמאות משתמשות בקובץ 'meta.xml' זה. לא נפרט זאת בכל דוגמה. ניתן להוסיף את רכיבי ה-LWC לדף ההקלטה, לדף האפליקציה ולדף הבית שלך.



גִרְסָה = '1.0' ?>

= 'http://soap.sforce.com/2006/04/metadata' >

57.0 < / apiVersion>

נָכוֹן < / הוא חשוף>

<מטרות>

<יעד> lightning__RecordPage < / יעד>

<יעד> lightning__AppPage < / יעד>

<יעד> lightning__דף הבית < / יעד>

< / מטרות>

< / LightningComponentBundle>

דוגמה 1:

נדגים את ה-constructor() ואת שלב connectedcallback() כאשר הרכיב נטען בממשק המשתמש.



connectedCallBack.html

<תבנית>

<כרטיס ברק כותרת = 'התקשרות חזרה' >

< / ברק-כרטיס>

< / תבנית>

connectedCallBack.js

// שלב הרכבה - קונסטרוקטור()

בַּנַאִי ( ) {
סוּפֶּר ( )
לְנַחֵם. עֵץ ( 'נקרא קונסטרוקטור' )
}


// שלב הרכבה - מחוברCallback()
מחובר התקשרות חזרה ( ) {
לְנַחֵם. עֵץ ( 'connectedCallback התקשר' )
}

זה נראה כמו הבא:



תְפוּקָה:

הוסף את הרכיב הזה לדף 'הקלט' של כל אובייקט.

בדוק את הדף (לחץ שמאל ובחר 'בדוק'). לאחר מכן, עבור לכרטיסייה 'קונסול'.

דוגמה 2:

בדוגמה זו, ניצור פרי עם מעצב רצועות ונקבע את ערך המאפיין ל-'Mango' בתוך שיטת connectedcallback()‎. זה מוצג בממשק המשתמש.

firstExample.html

<תבנית>

<כרטיס ברק כותרת = 'הגדרת מאפיינים' >

< div מעמד = 'slds-var-m-around_medium' >

< ב > שם הפרי: < / ב > {פרי}

< / div >

< / ברק-כרטיס>

< / תבנית>

firstExample.js

יְבוּא { LightningElement , מַסלוּל } מ 'מַזָל' ;

יְצוּא בְּרִירַת מֶחדָל מעמד דוגמה ראשונה משתרע LightningElement {

@ לעקוב אחר פירות ;
מחובר התקשרות חזרה ( ) {
// הגדרת ערך המאפיין למנגו
זֶה . פרי = 'מנגו' ;
}


}

תְפוּקָה:

הוסף את הרכיב הזה לדף 'הקלט' של כל אובייקט. כאן אנו מוסיפים אותו לדף 'תיעוד חשבון'. תראה שהפרי הוא 'מנגו'.

דוגמה 3:

השתמש בקוד הקודם ושנה כמה הצהרות בקובץ 'js' ו- 'html'.

צור משתנה חדש שהוא 'מספר' עם 500 בקובץ 'js'. הגדר את הפרי ל-'גדול מ-500' אם המספר גדול מ-500.  אחרת, הגדר את הפרי כ-'שווה ל-500'.

firstExample.html

<תבנית>

<כרטיס ברק כותרת = 'הגדרת מאפיינים' >

< div מעמד = 'slds-var-m-around_medium' >

< ב > עֲלוּת: < / ב > {פרי}

< / div >

< / ברק-כרטיס>

< / תבנית>

firstExample.js

@ לעקוב אחר פירות ;

מחובר התקשרות חזרה ( ) {
לתת מספר = 500 ;


אם ( מספר > 500 ) {

זֶה . פרי = 'יותר מ-500' ;
}
אַחֵר {
זֶה . פרי = 'שווה ל-500' ;
}


}

תְפוּקָה:

המספר הוא 500. לכן, הפרי מחזיק בתוצאה כ'שווה ל-500'.

דוגמה 4:

בתרחיש זה, אנו מחזירים את רשומות החשבון (אובייקט חשבון) באמצעות שיטת connectedcallback() .

  1. ראשית, אנו כותבים מחלקה של Apex שמחזירה את רשימת 10 החשבונות הראשונים עם השדות Id, Name, Industry ודירוג
  2. לאחר מכן, אנו עוקבים אחר החשבונות ומחזירים אותם בשיטת connectedcallback() על ידי קריאה למתודה מהמחלקה Apex.
  3. בקובץ ה-HTML, אנו משתמשים בו עבור כל הנחיה המחזרת את החשבונות ומחזירה את השם והתעשייה.

AccountData.apxc

ציבורי עם שיתוף הכיתה AccountData {

@AuraEnabled(cacheable=true)

רשימה סטטית ציבורית returnAcc(){

List accountList = [SELECT ID, Name,Industry,Rating FROM Account List 10];

החזר רשימה של חשבונות;
}


}

secondExample.html

<תבנית>

<כרטיס ברק כותרת = 'הצג רשימה של חשבונות' >

< div מעמד = 'slds-var-m-around_medium' >