Lightning Web Component (LWC) มีวงจรชีวิตของตัวเองเพื่อแทรกส่วนประกอบลงใน DOM เรนเดอร์ และลบส่วนประกอบออกจาก DOM ConnectedCallback() (ในเฟสการติดตั้ง) เป็นหนึ่งในเมธอด LifeCycle ซึ่งจะเริ่มทำงานเมื่อมีการแทรกคอมโพเนนต์ลงใน DOM ในคู่มือนี้ เราจะพูดถึง Connectioncallback() และสถานการณ์ต่างๆ ที่มีวิธีนี้พร้อมตัวอย่าง
- Constructor() เป็นเมธอดแรกใน Lifecycle hook ซึ่งจะถูกเรียกเมื่อมีการสร้างอินสแตนซ์ “Component” คุณสมบัติส่วนประกอบในระยะนี้จะไม่พร้อม หากคุณต้องการเข้าถึงองค์ประกอบโฮสต์ เราจำเป็นต้องใช้ “this.template” เนื่องจากไม่มีส่วนประกอบย่อยในระยะนี้ เราจึงไม่สามารถเข้าถึงส่วนประกอบย่อยได้เช่นกัน วิธีนี้ใช้ Super()
- Connectedcallback() เป็นวิธีการที่สอง (เฟส 2) ซึ่งจะถูกเรียกเมื่อองค์ประกอบถูกแทรกเข้าไปใน DOM ในกรณีนี้ เบ็ดจะไหลจากพาเรนต์ไปยังลูก คุณสมบัติส่วนประกอบในระยะนี้จะไม่พร้อม หากคุณต้องการเข้าถึงองค์ประกอบโฮสต์ เราจำเป็นต้องใช้ “this.template” เนื่องจากไม่มีส่วนประกอบย่อยในระยะนี้ เราจึงไม่สามารถเข้าถึงส่วนประกอบย่อยได้เช่นกัน
- แสดงผล (): เฟสต่อกำลังเรนเดอร์ คอมโพเนนต์หลักถูกเรนเดอร์แล้วคอมโพเนนต์ลูกจะเรนเดอร์หากมีอยู่ หลังจากเรนเดอร์พาเรนต์แล้ว มันจะไปที่คอมโพเนนต์ลูก (ตัวสร้าง เชื่อมต่อการโทรกลับ เรนเดอร์) และทำตามขั้นตอนเดียวกันกับพาเรนต์
- แสดงผลโทรกลับ (): เมื่อการเรนเดอร์ส่วนประกอบเสร็จสมบูรณ์ และคุณต้องการดำเนินการใดๆ หลังจากนี้ วิธีการนี้จะเรียกว่า
- ยกเลิกการเชื่อมต่อการโทรกลับ (): ในขั้นตอนนี้ องค์ประกอบจะถูกลบออกจาก DOM (ตรงข้ามกับ Connectedcallback())
- errorCallback() จะถูกเรียกเมื่อมีข้อผิดพลาดเกิดขึ้นใน LifeCycle
โครงสร้าง Connectedcallback()
ใช้เชื่อมต่อโทรกลับ ():
- กำหนดตัวแปรและตั้งค่าคุณสมบัติ
- เรียกเอเพ็กซ์อยู่ข้างใน
- สร้างและส่งเหตุการณ์
- สามารถเรียก UI API ได้
- บริการนำทางภายในนั้น
จะต้องระบุในไฟล์ JavaScript ดังต่อไปนี้:
เชื่อมต่อโทรกลับ ( ) {
// ทำ…
}
ตัวอย่างทั้งหมดใช้ไฟล์ “meta.xml” นี้ เราจะไม่ระบุสิ่งนี้ในแต่ละตัวอย่าง คุณสามารถเพิ่มส่วนประกอบ LWC ลงในหน้าบันทึก หน้าแอพ และโฮมเพจของคุณได้
รุ่น = '1.0' ?>
<เวอร์ชัน API> 57.0 < / เวอร์ชัน api>
<ถูกเปิดเผย> จริง < / ถูกเปิดเผย>
<เป้าหมาย>
<เป้าหมาย> ฟ้าผ่า__RecordPage < / เป้าหมาย>
<เป้าหมาย> สายฟ้า__AppPage < / เป้าหมาย>
<เป้าหมาย> ฟ้าผ่า__หน้าแรก < / เป้าหมาย>
< / เป้าหมาย>
< / LightningComponentBundle>
ตัวอย่างที่ 1:
เราจะสาธิตขั้นตอน Constructor() และ Connectedcallback() เมื่อมีการโหลดส่วนประกอบบน UI
เชื่อมต่อ CallBack.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = 'เชื่อมต่อโทรกลับ' >
< / การ์ดสายฟ้า>
< / แม่แบบ>
เชื่อมต่อ CallBack.js
// เฟสการติดตั้ง - ตัวสร้าง ()ตัวสร้าง ( ) {
สุด ๆ ( )
คอนโซล บันทึก ( “คอนสตรัคเตอร์โทรมา” )
}
// เฟสการติดตั้ง - เชื่อมต่อ Callback ()
เชื่อมต่อโทรกลับ ( ) {
คอนโซล บันทึก ( 'เชื่อมต่อโทรกลับแล้ว' )
}
ดูเหมือนว่าต่อไปนี้:
เอาท์พุท:
เพิ่มส่วนประกอบนี้ลงในหน้า 'บันทึก' ของออบเจ็กต์ใดๆ
ตรวจสอบหน้า (คลิกซ้ายแล้วเลือก 'ตรวจสอบ') จากนั้นไปที่แท็บ 'คอนโซล'
ตัวอย่างที่ 2:
ในตัวอย่างนี้ เราจะสร้างผลไม้ที่มีตัวตกแต่งแทร็กและตั้งค่าคุณสมบัติเป็น “Mango” ภายในเมธอด Connectedcallback() สิ่งนี้จะแสดงบน UI
firstExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = “การตั้งค่าคุณสมบัติ” >
< กอง ระดับ = 'slds-var-m-around_medium' >
< ข > ชื่อผลไม้: < / ข > {ผลไม้}
< / กอง >
< / การ์ดสายฟ้า>
< / แม่แบบ>
firstExample.js
นำเข้า { ธาตุสายฟ้า , ติดตาม } จาก 'โชค' ;ส่งออก ค่าเริ่มต้น ระดับ ตัวอย่างแรก ขยาย ธาตุสายฟ้า {
@ ติดตามผลไม้ ;
เชื่อมต่อโทรกลับ ( ) {
// ตั้งค่าคุณสมบัติเป็น Mango
นี้ . ผลไม้ = 'มะม่วง' ;
}
}
เอาท์พุท:
เพิ่มส่วนประกอบนี้ลงในหน้า 'บันทึก' ของออบเจ็กต์ใดๆ ที่นี่เราเพิ่มลงในหน้า 'บันทึกบัญชี' จะเห็นว่าผลไม้คือ “มะม่วง”
ตัวอย่างที่ 3:
ใช้โค้ดก่อนหน้าและแก้ไขคำสั่งบางอย่างในไฟล์ 'js' และ 'html'
สร้างตัวแปรใหม่ซึ่งก็คือ “number” โดยมี 500 ในไฟล์ “js” ตั้งค่าผลไม้เป็น 'มากกว่า 500' หากตัวเลขมากกว่า 500 หรือมิฉะนั้น ให้ตั้งค่าผลไม้เป็น 'เท่ากับ 500'
firstExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = “การตั้งค่าคุณสมบัติ” >
< กอง ระดับ = 'slds-var-m-around_medium' >
< ข > ค่าใช้จ่าย: < / ข > {ผลไม้}
< / กอง >
< / การ์ดสายฟ้า>
< / แม่แบบ>
firstExample.js
@ ติดตามผลไม้ ;เชื่อมต่อโทรกลับ ( ) {
ให้หมายเลข = 500 ;
ถ้า ( ตัวเลข > 500 ) {
นี้ . ผลไม้ = 'มากกว่า 500' ;
}
อื่น {
นี้ . ผลไม้ = 'เท่ากับ 500' ;
}
}
เอาท์พุท:
จำนวนคือ 500 ดังนั้นผลไม้จึงให้ผลลัพธ์เป็น “เท่ากับ 500”
ตัวอย่างที่ 4:
ในสถานการณ์สมมตินี้ เราจะส่งคืนเรกคอร์ดบัญชี (วัตถุบัญชี) โดยใช้วิธีconnectedcallback()
- ขั้นแรก เราเขียนคลาส Apex ที่ส่งคืนรายการบัญชี 10 บัญชีแรกที่มีฟิลด์ Id, Name, Industry และ Rating
- ต่อไป เราจะติดตามบัญชีและส่งคืนในวิธีconnectedcallback() โดยการเรียกวิธีการจากคลาส Apex
- ในไฟล์ HTML เราใช้สำหรับแต่ละคำสั่งที่วนซ้ำบัญชีและส่งคืนชื่อและอุตสาหกรรม
AccountData.apxc
สาธารณะพร้อมคลาสการแชร์ AccountData {@AuraEnabled(แคชได้=จริง)
รายการคงที่สาธารณะ <บัญชี> returnAcc(){
รายการ <บัญชี> รายการบัญชี = [เลือก Id, ชื่อ, อุตสาหกรรม, การจัดอันดับจากบัญชีจำกัด 10];
ส่งคืนรายการบัญชี;
}
}
SecondExample.html
<แม่แบบ><การ์ดสายฟ้า ชื่อ = “แสดงรายการบัญชี” >
< กอง ระดับ = 'slds-var-m-around_medium' >
<แม่แบบถ้า:จริง = { บัญชี } >
<เทมเพลต สำหรับ :แต่ละ = { บัญชี } สำหรับ :รายการ = 'account_rec' >
< พี สำคัญ = { บัญชี_rec รหัส } >< ข > บัญชี: < / ข > {account_rec.ชื่อ} < ข > อุตสาหกรรม: < / ข > {account_rec.อุตสาหกรรม} < / พี >
< / แม่แบบ>
< / แม่แบบ>
< / กอง >
< / การ์ดสายฟ้า>
< / แม่แบบ>
SecondExample.js
นำเข้า returnAcc จาก Apex ระดับ : :นำเข้า กลับจาก '@salesforce/apex/AccountData.returnAcc' ;
เขียน นี้ รหัสภายใน 'js' ระดับ : :
@ ติดตามบัญชี ;
@ ติดตามข้อผิดพลาด ;
เชื่อมต่อโทรกลับ ( ) {
กลับบัญชี ( )
//คืนบัญชี
. แล้ว ( ผลลัพธ์ => {
นี้ . บัญชี = ผลลัพธ์ ;
นี้ . ข้อผิดพลาด = ไม่ได้กำหนด ;
} )
. จับ ( ข้อผิดพลาด => {
นี้ . ข้อผิดพลาด = ข้อผิดพลาด ;
นี้ . บัญชี = ไม่ได้กำหนด ;
} ) ;
}
เอาท์พุท:
บันทึกบัญชี 10 รายการแรกจะถูกส่งกลับพร้อมชื่อบัญชีและอุตสาหกรรม
บทสรุป
ตอนนี้คุณสามารถใช้เมธอดconnectedcallback() ในกรณีส่วนใหญ่ในขณะที่ทำงานกับข้อมูล Apex ใน LWC ในคู่มือนี้ เราได้พูดคุยถึงวิธีการตั้งค่าคุณสมบัติโดยใช้ Connectedcallback() และรวม Apex ไว้ในนั้น เพื่อความเข้าใจที่ดีขึ้น ก่อนอื่นเราได้จัดเตรียมตัวอย่างที่แสดงเมธอด Constructor() และ Connectedcallback() คุณต้องตรวจสอบหน้าเว็บของคุณและดูในคอนโซล