Thành phần Lightning Web (LWC) có Vòng đời riêng để chèn/các thành phần vào DOM, hiển thị nó và xóa/các thành phần đó khỏi DOM. ConnectedCallback() (trong Giai đoạn gắn kết) là một trong các phương thức LifeCycle được kích hoạt khi thành phần được chèn vào DOM. Trong hướng dẫn này, chúng ta sẽ thảo luận về Connectioncallback() và các tình huống khác nhau bao gồm phương thức này cùng với các ví dụ.
- Hàm tạo () là phương thức đầu tiên trong Lifecycle hook được gọi khi phiên bản “Thành phần” được tạo. Các thuộc tính thành phần trong giai đoạn này sẽ chưa sẵn sàng. Nếu bạn muốn truy cập phần tử máy chủ, chúng ta cần sử dụng “this.template”. Vì các thành phần con trong giai đoạn này sẽ không tồn tại nên chúng ta cũng không thể truy cập vào các thành phần con đó. Super() được sử dụng trong phương pháp này.
- Connectedcallback() là phương thức thứ hai (giai đoạn 2) được gọi khi một phần tử được chèn vào DOM. Trong trường hợp này, hook chuyển từ cha mẹ sang con cái. Các thuộc tính thành phần trong giai đoạn này sẽ chưa sẵn sàng. Nếu bạn muốn truy cập phần tử máy chủ, chúng ta cần sử dụng “this.template”. Vì các thành phần con trong giai đoạn này sẽ không tồn tại nên chúng ta cũng không thể truy cập vào các thành phần con đó.
- kết xuất (): Giai đoạn mở rộng đang hiển thị. Thành phần cha mẹ được hiển thị và sau đó thành phần con sẽ hiển thị nếu nó tồn tại. Sau khi kết xuất thành phần gốc, nó sẽ đi đến thành phần con (hàm tạo, gọi lại được kết nối, kết xuất) và làm theo các bước tương tự như thành phần gốc.
- kết xuấtGọi lại (): Khi quá trình kết xuất thành phần hoàn tất và bạn muốn thực hiện bất kỳ thao tác nào sau đó, phương thức này sẽ được gọi.
- bị ngắt kết nốiGọi lại (): Trong giai đoạn này, phần tử bị xóa khỏi DOM (ngược lại với linkedcallback()).
- errorCallback() được gọi khi xảy ra lỗi trong LifeCycle.
Cấu trúc Connectedcallback()
Sử dụng kết nốicallback():
- Xác định một biến và đặt giá trị thuộc tính.
- Gọi Apex bên trong nó.
- Tạo và gửi các sự kiện.
- API UI có thể được gọi.
- Dịch vụ điều hướng bên trong nó.
Nó phải được chỉ định trong tệp JavaScript như sau:
đã kết nốiGọi lại ( ) {
// LÀM…
}
Tất cả các ví dụ đều sử dụng tệp “meta.xml” này. Chúng tôi sẽ không chỉ định điều này trong mỗi ví dụ. Các thành phần LWC có thể được thêm vào Trang bản ghi, Trang ứng dụng và Trang chủ của bạn.
phiên bản = '1.0' ?>
<được phơi bày> ĐÚNG VẬY < / được phơi bày>
< / mục tiêu>
< / Gói thành phần Lightning>
Ví dụ 1:
Chúng ta sẽ minh họa giai đoạn constructor() và linkedcallback() khi thành phần này được tải trên giao diện người dùng.
đã kết nốiCallBack.html
< / thẻ sét>
< / mẫu>
đã kết nốiCallBack.js
// Giai đoạn gắn kết - constructor()người xây dựng ( ) {
siêu ( )
bảng điều khiển. nhật ký ( 'hàm tạo được gọi' )
}
// Giai đoạn gắn kết -connectedCallback()
đã kết nốiGọi lại ( ) {
bảng điều khiển. nhật ký ( 'connectedCallback đã gọi' )
}
Nó trông giống như sau:
Đầu ra:
Thêm thành phần này vào trang “Record” của bất kỳ đối tượng nào.
Kiểm tra trang (nhấp chuột trái và chọn “Kiểm tra”). Sau đó, chuyển đến tab “Bảng điều khiển”.
Ví dụ 2:
Trong ví dụ này, chúng ta sẽ tạo một loại trái cây có trình trang trí bản nhạc và đặt giá trị thuộc tính thành “Mango” bên trong phương thức connectcallback(). Điều này được hiển thị trên giao diện người dùng.
firstExample.html
< div lớp học = 'slds-var-m-around_medium' >
< b > Tên trái cây: < / b > {hoa quả}
< / div >
< / thẻ sét>
< / mẫu>
firstExample.js
nhập khẩu { Yếu tố sét , theo dõi } từ 'may mắn' ;xuất khẩu mặc định lớp học Ví dụ đầu tiên mở rộng Yếu tố sét {
@ theo dõi trái cây ;
đã kết nốiGọi lại ( ) {
// Đặt giá trị thuộc tính thành Mango
cái này . hoa quả = 'Quả xoài' ;
}
}
Đầu ra:
Thêm thành phần này vào trang “Record” của bất kỳ đối tượng nào. Ở đây chúng tôi thêm nó vào trang “Bản ghi tài khoản”. Bạn sẽ thấy quả đó là “Xoài”.
Ví dụ 3:
Sử dụng mã trước đó và sửa đổi một số câu lệnh trong tệp “js” và “html”.
Tạo một biến mới là “number” với 500 trong tệp “js”. Đặt trái cây thành “lớn hơn 500” nếu số lớn hơn 500. Nếu không, hãy đặt trái cây là “bằng 500”.
firstExample.html
< div lớp học = 'slds-var-m-around_medium' >
< b > Trị giá: < / b > {hoa quả}
< / div >
< / thẻ sét>
< / mẫu>
firstExample.js
@ theo dõi trái cây ;đã kết nốiGọi lại ( ) {
hãy để số = 500 ;
nếu như ( con số > 500 ) {
cái này . hoa quả = 'lớn hơn 500' ;
}
khác {
cái này . hoa quả = 'bằng 500' ;
}
}
Đầu ra:
Số đó là 500. Vậy kết quả là “bằng 500”.
Ví dụ 4:
Trong trường hợp này, chúng tôi trả về bản ghi tài khoản (đối tượng Tài khoản) bằng phương thức linkedcallback().
- Đầu tiên, chúng tôi viết một lớp Apex trả về danh sách 10 tài khoản đầu tiên với các trường Id, Name, Industry và Rating
- Tiếp theo, chúng tôi theo dõi các tài khoản và trả lại chúng trong phương thức linkedcallback() bằng cách gọi phương thức này từ lớp Apex.
- Trong tệp HTML, chúng tôi sử dụng nó cho mỗi lệnh lặp lại các tài khoản và trả về Tên và Ngành.
Tài khoảnData.apxc
công khai với lớp chia sẻ AccountData {@AuraEnabled(có thể lưu vào bộ nhớ đệm=true)
Danh sách tĩnh công khai
List
trả lại danh sách tài khoản;
}
}
giâyExample.html
< div lớp học = 'slds-var-m-around_medium' >
< P chìa khóa = { tài khoản_rec. Nhận dạng } >< b > Tài khoản: < / b > {account_rec.Name} < b > Ngành công nghiệp: < / b > {account_rec.Industry} < / P >
< / mẫu>
< / mẫu>
< / div >
< / thẻ sét>
< / mẫu>
thứ haiExample.js
Nhập returnAcc từ Apex lớp học :nhập khẩu trả lạiAcc từ '@saleforce/apex/AccountData.returnAcc' ;
Viết cái này mã trong “js” lớp học :
@ theo dõi tài khoản ;
@ lỗi theo dõi ;
đã kết nốiGọi lại ( ) {
returnAcc ( )
// Trả về các tài khoản
. sau đó ( kết quả => {
cái này . tài khoản = kết quả ;
cái này . lỗi = không xác định ;
} )
. nắm lấy ( lỗi => {
cái này . lỗi = lỗi ;
cái này . tài khoản = không xác định ;
} ) ;
}
Đầu ra:
10 bản ghi tài khoản đầu tiên được trả về cùng với Tên tài khoản và Ngành.
Phần kết luận
Giờ đây, bạn có thể sử dụng phương thức connectcallback() trong hầu hết các trường hợp khi làm việc với dữ liệu Apex trong LWC. Trong hướng dẫn này, chúng tôi đã thảo luận cách đặt giá trị thuộc tính bằng cách sử dụng Connectedcallback() và bao gồm Apex trong đó. Để hiểu rõ hơn, trước tiên chúng tôi cung cấp một ví dụ hiển thị các phương thức constructor() và linkedcallback(). Bạn cần kiểm tra trang web của mình và xem nó trong bảng điều khiển.