التواصل بين مكونات Angular

Name: التواصل بين مكونات Angular
Author: Michaela Ochnich

ستتعرف على الطرق المختلفة التي يمكنك من خلالها تمرير المعلومات

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ7.

دورة تدريبية: عند الطلب

سيوضح هذا الدرس لك كيفية استخدام خاصية الإدخال لإرسال معلومات من مكون أصل إلى مكون تابع حتى هنا، لدي تطبيق أولي تم إنشاؤه باستخدام Angular CLI أولاً، سأقوم بإنشاء مكون أصل ومكون تابع لتمرير المعلومات بينهما وهنا تخطيت للتو إنشاء ملف الاختبار وملف CSS المنفصل ثم في قالب مكون التطبيق الجذر سأحذف جميع الأكواد الأولية ثم أقوم بإضافة هذا المكون الأصل والآن بعد أن تم إعداده سأقوم بفتح القالب الأصل ثم تضمين المكون التابع به لذا الآن، هذا المكون التابع داخل المكون الأصل سأفتح فئة المكون التابع وبعد ذلك سأستورد علامة الإدخال من مكتبة Angular core لذلك يمكن استخدام خصائص الإدخال لإرسال المعلومات من مكون أصل إلى مكون تابع وتحافظ على مزامنة هذه المعلومات بعد ذلك، سأعلن خاصية الإدخال في فئة المكون التابع لذا فإن علامة الإدخال هو ما يميز الرسالة على إنها خاصية إدخال وخاصية الإدخال مرتبطة بخصائص في Dom في هذه الحالة، سيتم ربطها بالمكوِّن الأصل عندما يتم تحديث تلك الخاصية في Dom من المكون الأصل سيقوم Angular بتحديث خاصية الإدخال هذه في فئة المكون التابع أيضًا وهو ما يحافظ على مزامنة تلك البيانات هنا لدي مجموعة الخصائص مع معامل إسناد محدد حيث أن هذه الخاصية ستحصل على قيمتها الأولية من الأصل ومع ذلك، يمكنك أيضًا تعيين قيمة افتراضية للخصائص على هذا النحو لذلك هنا إذا لم يتم تهيئة هذا المكون بأي شكل من الأشكال دون أن تكون خاصية الإدخال مرتبطة في المكون الأصل فستكون قيمة هذه الرسالة بشكل افتراضي للترحيب وبعد ذلك سأعرض هذه الرسالة في قالب المكون التابع والآن بعد أن تم إعداد المكون التابع لاستلام قيمة الإدخال تلك يحتاج المكون الأصل إلى تمرير هذه القيمة إلى المكون التابع لذا، أولًا في فئة المكون الأصل سأحدد رسالة لتمريرها ثم في قالب المكون الأصل سأربط هذا بخاصية إدخال المكونات التابعة لذلك أنا هنا أستخدم الخاصية ربط وهو ما يتم باستخدام الأقواس المربعة لربط متغير رسالة الأصل إلى خاصية إدخال الرسالة الذي تم إنشاؤها في المكون التابع ثم عرض ذلك في المتصفح يمكنك رؤية الرسالة التي تم تعيينها في المكون الأصل يتم تمريرها إلى وعرضها في المكون التابع لذلك قد ترغب أحيانًا في الإشارة إلى قيمة الإدخال هذه بواسطة اسم مختلف داخل فئة المكون التابع في هذه الحالات، يمكنك إنشاء اسم مستعار لخاصية الإدخال لذا، بالعودة إلى فئة المكونات التابعة سأعيد تسمية هذه الخاصية إلى رسالة المكون الأصل وبعد ذلك في علامة الإدخال قم بتمرير اسم الخاصية الذي يرتبط المكون الأصل بها في هذه الحالة، هذه هي الرسالة والآن بعد أن عرف المكون التابع خاصية الإدخال هذه على إنها رسالة أصل يجب تحديث القالب ثم عرض ذلك في المتصفح يمكنك أن ترى أن هذه الرسالة لا تزال قيد التمرير من المكون الأصل الي المكون التابع هذا كل ما في هذا الدرس حول كيفية استخدام خصائص الإدخال للتواصل من المكون الأصل إلى المكون التابع وفي الدرس التالي ستتعلم كيفية اعتراض أي تغييرات في قيم الإدخال باستخدام الضابط والجالب

متوسط مقدِّم الخدمة : Michaela Ochnich 7 الدروس · 36m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, Chinese

وصف الدورة

سيوضح هذا الجزء طرقًا مختلفة يمكنك من خلالها إرسال المعلومات بين المكونات، بناءً على علاقتها ببعضها البعض. ستتعلم كيفية تمرير المعلومات من المكون الأصل إلى التابع أو من المكون التابع إلى الأصل أو كلا الطريقتين بين مكونين. ستتعلم أيضًا كيفية اعتراض بعض هذه التغيرات في البيانات وتعديلها إذا لزم الأمر قبل استخدامها في المكون.

ما ستتعلمه

إرسال البيانات من المكوّن الأب إلى المكوّن الابن باستخدام Input والمحددات والجالبات وOnChanges
إرسال البيانات من المكوّن الابن إلى المكوّن الأب باستخدام Output وEventEmitter
الوصول إلى مكوّن ابن عبر قالب المكوّن الأب أو صنفه باستخدام ViewChild ومتغيرات المرجع
التواصل ثنائي الاتجاه بين مكوّنَين
اعتراض تغييرات البيانات وتعديلها قبل استخدامها في المكوّن
مشاركة البيانات بين المكونات باستخدام خدمة مشتركة

النقاط الرئيسية

تعتمد طريقة التواصل بين مكونات Angular على علاقتها ببعضها.
يمكن تمرير المعلومات من الأب إلى الابن، أو من الابن إلى الأب، أو في كلا الاتجاهين بين مكوّنَين.
يمكن اعتراض بعض تغييرات البيانات وتعديلها قبل استخدامها في المكوّن.
يمكن للمكوّن الأب الوصول إلى مكوّن ابن عبر قالب الأب أو صنفه.
تُعدّ الخدمة المشتركة أحد أساليب التواصل بين المكونات.

الأسئلة الشائعة

ما الذي يغطيه هذا المقرر؟

يستعرض هذا الفصل الطرق المختلفة لإرسال المعلومات بين مكونات Angular بحسب علاقتها، بما في ذلك تمرير البيانات من الأب إلى الابن، ومن الابن إلى الأب، أو في كلا الاتجاهين بين مكوّنَين، واعتراض تغييرات البيانات وتعديلها قبل الاستخدام.

ماذا سأتعلم في هذا المقرر؟

ستتعلم كيفية إرسال البيانات من مكوّن ابن إلى مكوّن أب، وإرسال البيانات من مكوّن أب إلى مكوّن ابن، والوصول إلى مكوّن ابن عبر قالب الأب أو صنفه، والتواصل ثنائي الاتجاه بين مكوّنَين.

ما الموضوعات والتقنيات التي تتناولها الدروس؟

تغطي الدروس: Input والمحددات والجالبات وOnChanges وOutput وEventEmitter وViewChild والخدمة المشتركة ومتغيرات المرجع.

ما المهارات التي يساعدني هذا المقرر على بنائها؟

يبني المقرر مهارات في مكونات Angular ومخططات الاتصال ومخططات المكونات ومكتبات المكونات والمكونات المتصلة ومكونات HTML.

هل يمكنني تعلم كيفية تعديل البيانات قبل أن يستخدمها المكوّن؟

نعم. يُعلّم المقرر كيفية اعتراض بعض تغييرات البيانات وتعديلها عند الحاجة قبل استخدامها في المكوّن.