المكوّنات الديناميكية

في هذا الدرس، ستتعلّمون كيفية تحميل المكوّنات ديناميكيًا في Angular لإنشاء تطبيقات مرنة.

ما المكوّنات الديناميكية؟

تُحمّل المكوّنات الديناميكية في الواجهة وقت التشغيل بدلًا من التصريح عنها مباشرةً في قالب.

لماذا نستخدم المكوّنات الديناميكية؟

• عرض مرن لواجهة المستخدم
• عرض المكوّنات بشكل مشروط
• إنشاء لوحات معلومات أو نوافذ حوار ديناميكية

إنشاء عنصر نائب

استخدموا <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();

الملخص

أصبحتم الآن تعرفون كيفية إنشاء المكوّنات وإدارتها وإزالتها ديناميكيًا في Angular. عمل رائع!