LWC – ConnectedCallback()

Lightning Web Component (LWC) има свой собствен жизнен цикъл за вмъкване на компонента/ите в DOM, изобразяването му и премахване на компонента/ите от DOM. ConnectedCallback() (във фазата на монтиране) е един от методите на LifeCycle, който се задейства, когато компонентът се вмъкне в DOM. В това ръководство ще обсъдим connectioncallback() и различните сценарии, които включват този метод с примери.

1. Constructor() е първият метод в куката на жизнения цикъл, който се извиква, когато се създаде екземплярът „Component“. Свойствата на компонента в тази фаза няма да бъдат готови. Ако искате да получите достъп до хост елемента, трябва да използваме „this.template“. Тъй като дъщерните компоненти в тази фаза няма да съществуват, ние също нямаме достъп до дъщерните компоненти. В този метод се използва Super().
2. Connectedcallback() е вторият метод (фаза 2), който се извиква, когато даден елемент е вмъкнат в DOM. В този случай куката преминава от родител към дете. Свойствата на компонента в тази фаза няма да бъдат готови. Ако искате да получите достъп до хост елемента, трябва да използваме „this.template“. Тъй като дъщерните компоненти в тази фаза няма да съществуват, ние също нямаме достъп до дъщерните компоненти.
3. рендиране (): Външната фаза е изобразяване. Изобразява се родителският компонент и след това дъщерният компонент ще се изобразява, ако съществува. След рендиране на родителя, той отива към дъщерния компонент (конструктор, свързано обратно извикване, рендиране) и следва същите стъпки като родителя.
4. renderedCallback (): Когато изобразяването на компонента приключи и искате да извършите някаква операция след това, този метод се извиква.
5. disconnectedCallback (): В този етап елементът се премахва от DOM (противоположно наconnectedcallback()).
6. ErrorCallback() се извиква, когато възникне грешка в LifeCycle.

Connectedcallback() Структура

Използване наconnectedcallback():

1. Дефинирайте променлива и задайте стойност на свойството.
2. Обадете се на Apex вътре в него.
3. Създавайте и изпращайте събитията.
4. UI API може да бъде извикан.
5. Навигационна услуга вътре в него.

Тя трябва да бъде посочена в JavaScript файла, както следва:

Всички примери използват този файл „meta.xml“. Няма да уточняваме това във всеки пример. Компонентите на LWC могат да се добавят към вашата страница със записи, страница с приложения и начална страница.

Пример 1:

Ще демонстрираме фазата constructor() иconnectedcallback(), когато компонентът е зареден в потребителския интерфейс.

connectedCallBack.html

connectedCallBack.js

Изглежда така:

Изход:

Добавете този компонент към страницата „Запис“ на всеки обект.

Проверете страницата (щракнете вляво и изберете „Проверка“). След това отидете в раздела „Конзола“.

Пример 2:

В този пример ще създадем плод с декоратор на песни и ще зададем стойността на свойството на „Mango“ в методаconnectedcallback(). Това се показва в потребителския интерфейс.

firstExample.html

firstExample.js

Изход:

Добавете този компонент към страницата „Запис“ на всеки обект. Тук го добавяме към страницата „Запис на акаунта“. Ще видите, че плодът е „манго“.

Пример 3:

Използвайте предишния код и променете някои изрази във файла „js“ и „html“.

Създайте нова променлива, която е „число“ с 500 във файла „js“. Задайте плода на „по-голямо от 500“, ако числото е по-голямо от 500. В противен случай задайте плода като „равно на 500“.

firstExample.html

firstExample.js

Изход:

Числото е 500. Така че плодът държи резултата като „равен на 500“.

Пример 4:

В този сценарий връщаме записите на акаунта (обект на акаунт), като използваме методаconnectedcallback().

1. Първо пишем клас Apex, който връща списъка с първите 10 акаунта с полетата Id, Name, Industry и Rating
2. След това проследяваме акаунтите и ги връщаме в методаconnectedcallback(), като извикваме метода от класа Apex.
3. В HTML файла го използваме за всяка директива, която итерира акаунтите и връща името и индустрията.

AccountData.apxc