คอมโพเนนต์แบบไดนามิก

ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีโหลดคอมโพเนนต์แบบไดนามิกในแองกูลาร์เพื่อสร้างแอปพลิเคชันที่ยืดหยุ่น

คอมโพเนนต์แบบไดนามิกคืออะไร

คอมโพเนนต์แบบไดนามิกจะถูกโหลดเข้าสู่มุมมองขณะทำงาน แทนที่จะประกาศไว้โดยตรงในเทมเพลต

เหตุใดจึงใช้คอมโพเนนต์แบบไดนามิก

• การแสดงผลส่วนติดต่อผู้ใช้ที่ยืดหยุ่น
• แสดงคอมโพเนนต์ตามเงื่อนไข
• สร้างแดชบอร์ดหรือหน้าต่างโมดัลแบบไดนามิก

การสร้างตัวแทนตำแหน่ง

ใช้ <ng-container> เป็นตัวแทนตำแหน่งสำหรับโหลดคอมโพเนนต์แบบไดนามิก:

<ng-container #dynamicContainer></ng-container>

การใช้ ViewChild

เข้าถึงตัวบรรจุโดยใช้ @ViewChild ในคลาสคอมโพเนนต์ของคุณ:

@ViewChild('dynamicContainer', { read: ViewContainerRef }) container;

การโหลดคอมโพเนนต์แบบไดนามิก

ใช้ตัวแก้ไขโรงงานคอมโพเนนต์เพื่อสร้างและแทรกคอมโพเนนต์:

const componentRef = this.container.createComponent(MyDynamicComponent);

การส่งข้อมูลไปยังคอมโพเนนต์แบบไดนามิก

ส่งข้อมูลไปยังคอมโพเนนต์ที่สร้างแบบไดนามิกโดยใช้อินพุต:

componentRef.instance.data = 'Hello Dynamic';

การลบคอมโพเนนต์แบบไดนามิก

คุณสามารถลบคอมโพเนนต์แบบไดนามิกออกจาก DOM ได้อย่างง่ายดาย:

this.container.clear();

สรุป

ตอนนี้คุณรู้วิธีสร้าง จัดการ และลบคอมโพเนนต์แบบไดนามิกในแองกูลาร์แล้ว ทำได้ยอดเยี่ยมมาก