Веб-компонент Lightning (LWC) имеет собственный жизненный цикл для вставки компонента(ов) в DOM, его рендеринга и удаления компонента(ов) из DOM. ConnectCallback() (на этапе монтажа) — это один из методов LifeCycle, который запускается при вставке компонента в DOM. В этом руководстве мы обсудим Connectioncallback() и различные сценарии, включающие этот метод, с примерами.
- Конструктор() — это первый метод в хуке жизненного цикла, который вызывается при создании экземпляра «Компонент». Свойства компонента на этом этапе не будут готовы. Если вы хотите получить доступ к элементу хоста, нам нужно использовать «this.template». Поскольку дочерние компоненты на этом этапе не будут существовать, мы также не сможем получить доступ к дочерним компонентам. В этом методе используется Super().
- Connectedcallback() — это второй метод (фаза 2), который вызывается, когда элемент вставляется в DOM. В этом случае хук передается от родителя к дочернему элементу. Свойства компонента на этом этапе не будут готовы. Если вы хотите получить доступ к элементу хоста, нам нужно использовать «this.template». Поскольку дочерние компоненты на этом этапе не будут существовать, мы также не сможем получить доступ к дочерним компонентам.
- оказывать (): Фаза ext — рендеринг. Родительский компонент отображается, а затем отображается дочерний компонент, если он существует. После рендеринга родительского компонента он переходит к дочернему компоненту (конструктор, ConnectedCallback, рендеринг) и выполняет те же шаги, что и родительский компонент.
- обработанный обратный вызов (): Когда рендеринг компонента завершен и после этого вы хотите выполнить какую-либо операцию, вызывается этот метод.
- отключенОбратный вызов (): На этом этапе элемент удаляется из DOM (в отличие от ConnectedCallback()).
- errorCallback() вызывается, когда ошибка возникает в жизненном цикле.
Структура Connectedcallback()
Использование подключенного обратного вызова():
- Определите переменную и установите значение свойства.
- Вызовите Апекс внутри него.
- Создавать и отправлять события.
- Можно вызвать API пользовательского интерфейса.
- Навигационный сервис внутри него.
Его необходимо указать в файле JavaScript следующим образом:
подключенОбратный вызов ( ) {
// делать…
}
Во всех примерах используется файл «meta.xml». Мы не будем указывать это в каждом примере. Компоненты LWC можно добавить на страницу записи, страницу приложения и домашнюю страницу.
версия '=' '1,0' ?>
<цели>
<цель> молния__RecordPage < / цель>
<цель> молния__AppPage < / цель>
<цель> молния__Главная страница < / цель>
< / цели>
< / Пакет LightningComponentBundle>
Пример 1:
Мы продемонстрируем этапы конструктора() и подключенного обратного вызова(), когда компонент загружается в пользовательский интерфейс.
ConnectedCallBack.html
<шаблон><карта-молния заголовок '=' «Подключенный обратный вызов» >
< / молния-карта>
< / шаблон>
ConnectedCallBack.js
// Фаза монтажа - конструктор()конструктор ( ) {
супер ( )
консоль. бревно ( 'конструктор вызвал' )
}
// Фаза монтажа - linkedCallback()
подключенОбратный вызов ( ) {
консоль. бревно ( 'вызван вызов подключенного обратного вызова' )
}
Это выглядит следующим образом:
Выход:
Добавьте этот компонент на страницу «Запись» любого объекта.
Осмотрите страницу (щелкните левой кнопкой мыши и выберите «Проверить»). Затем перейдите на вкладку «Консоль».
Пример 2:
В этом примере мы создадим фрукт с декоратором дорожки и установим значение свойства «Манго» внутри метода linkedcallback(). Это отображается в пользовательском интерфейсе.
firstExample.html
<шаблон><карта-молния заголовок '=' «Настройка свойств» >
< div сорт '=' 'slds-var-m-around_medium' >
< б > Название фрукта: < / б > {фрукты}
< / div >
< / молния-карта>
< / шаблон>
firstExample.js
Импортировать { МолнияЭлемент , отслеживать } от 'удача' ;экспорт по умолчанию сорт ПервыйПример простирается МолнияЭлемент {
@ отслеживать фрукты ;
подключенОбратный вызов ( ) {
// Установка значения свойства Mango
этот . фрукты '=' 'Манго' ;
}
}
Выход:
Добавьте этот компонент на страницу «Запись» любого объекта. Здесь мы добавляем его на страницу «Запись учетной записи». Вы увидите, что это фрукт «Манго».
Пример 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:
В этом сценарии мы возвращаем записи учетной записи (объект Account) с помощью метода linkedcallback().
- Сначала мы напишем класс Apex, который возвращает список первых 10 учетных записей с полями «Идентификатор», «Имя», «Отрасль» и «Рейтинг».
- Далее мы отслеживаем учетные записи и возвращаем их в методе linkedcallback(), вызывая метод из класса Apex.
- В HTML-файле мы используем его для каждой директивы, которая перебирает учетные записи и возвращает имя и отрасль.
АккаунтДата.apxc
public с общим классом AccountData {@AuraEnabled(кэшируемый=истина)
общедоступный статический список
List
вернуть список учетных записей;
}
}
второйExample.html
<шаблон><карта-молния заголовок '=' «Показать список учетных записей» >
< div сорт '=' 'slds-var-m-around_medium' >
<шаблон, если: правда '=' { Счета } >
<шаблон для :каждый '=' { Счета } для :элемент '=' 'аккаунт_рек' >
< п ключ '=' { аккаунт_рек. Идентификатор } >< б > Счет: < / б > {account_rec.Name} < б > Промышленность: < / б > {account_rec.Industry} < / п >
< / шаблон>
< / шаблон>
< / div >
< / молния-карта>
< / шаблон>
второйExample.js
Импортируйте returnAcc из Apex. сорт :Импортировать returnAcc от '@salesforce/apex/AccountData.returnAcc' ;
Писать этот код внутри «js» сорт :
@ отслеживать счета ;
@ ошибка отслеживания ;
подключенОбратный вызов ( ) {
returnAcc ( )
// Возвращаем аккаунты
. затем ( результат => {
этот . Счета '=' результат ;
этот . ошибка '=' неопределенный ;
} )
. ловить ( ошибка => {
этот . ошибка '=' ошибка ;
этот . Счета '=' неопределенный ;
} ) ;
}
Выход:
Первые 10 записей учетной записи возвращаются с именем учетной записи и отраслью.
Заключение
Теперь вы можете использовать метод linkedcallback() в большинстве случаев при работе с данными Apex в LWC. В этом руководстве мы обсудили, как установить значение свойства с помощью linkedcallback() и включили в него Apex. Для лучшего понимания мы сначала предоставили пример, демонстрирующий методыconstructor() иconnectedcallback(). Вам необходимо проверить свою веб-страницу и просмотреть ее в консоли.