🔹 Blazor - إنشاء مكونات ديناميكية (Dynamic Components)

في بعض الحالات، قد تحتاج إلى عرض مكون معين في وقت التشغيل بناءً على شرط أو قيمة متغيرة – هذا ما يُعرف بالمكونات الديناميكية. Blazor يدعم ذلك من خلال العنصر <DynamicComponent>.

---

🧠 ما هو DynamicComponent؟

هو مكون خاص في Blazor يسمح لك بعرض مكون آخر **بشكل ديناميكي**، أي أن اسم المكون يُحدد في وقت التشغيل، ويمكنك تمرير المعاملات إليه أيضًا.

<DynamicComponent Type="MyComponentType" Parameters="MyParameters" />

---

📦 مثال عملي

نفترض أن لدينا مكونين مختلفين:

<!-- WelcomeComponent.razor -->
<p class="text-success">👋 مرحبًا بك في موقعنا!</p>

<!-- ErrorComponent.razor -->
<p class="text-danger">❌ حدث خطأ ما!</p>

والآن نريد عرض أحدهما بناءً على قيمة معينة. ---

🔀 استخدام DynamicComponent لعرض مكون حسب شرط

@page "/dynamic-demo"

@using Microsoft.AspNetCore.Components

<h4>عرض مكون ديناميكي:</h4>
<button class="btn btn-primary me-2" @onclick="ShowWelcome">عرض ترحيب</button>
<button class="btn btn-danger" @onclick="ShowError">عرض خطأ</button>

<DynamicComponent Type="currentComponent" />

@code {
    private Type? currentComponent;

    void ShowWelcome() => currentComponent = typeof(WelcomeComponent);
    void ShowError() => currentComponent = typeof(ErrorComponent);
}

---

📥 تمرير Parameters للمكون الديناميكي

إذا كان المكون يستقبل [Parameter]، يمكنك تمرير القيم من خلال Dictionary:

@code {
    private Dictionary<string, object>? MyParameters = new()
    {
        { "Message", "مرحبًا بك من مكون ديناميكي 🎉" }
    };
}

<DynamicComponent Type="typeof(WelcomeComponent)" Parameters="MyParameters" />

---

💡 ملاحظات مهمة

• لجعل المكون قابلًا للعرض ديناميكيًا، يجب أن يكون من نوع Type ويتم استدعاؤه عبر DynamicComponent.
• يمكنك استخدامه في السيناريوهات التي تتطلب التبديل بين عدة مكونات.
• يناسب هذه التقنية أنظمة التصميم (Design Systems) أو محررات الصفحات الديناميكية.

---

✅ خلاصة الدرس

DynamicComponent يمنحك القدرة على بناء واجهات ديناميكية تتغير بحسب البيانات أو الأحداث، مما يفتح لك آفاقًا واسعة في بناء أنظمة مرنة وقابلة للتخصيص.