برمجة

مشاركة البيانات بين angular components باستخدام Input – Ouptut.

عند بناءك لموقع باستخدام angularjs وانشاء الكثير من components والانتقال بينهم.

بحيث يسهل عليك تخطيط وتصميم تركيبة مشروعك بشكل قابل للقراءة واكثر تنظيماً.

في هذه الحالات غالباً تحتاج ان تمرر بعض البيانات والقيم من component الى آخر بحيث يكمل العملية المتوقعة منه.

في هذه التدوينة راح اشرح كيف امرر بيانات الى component ومن ثم تجميع البيانات وطباعتها في component ثالث.

علاقة components مع بعضها تكون احدى الخيارين التاليين:

  1. parent -> child 
  2. child -> parent

parent -> child

يتم تضمين component بداخل component الاساسي للعملية ومن ثم تمرر البيانات من الأساسي الى الجزئي child component.

نستخدم Input Annotation

child -> parent

وهنا العكس من الجزئي child يتم تمرير البيانات الى component الاساسي.

نستخدم Output Annotation

 

 

ننشأ تطبيقنا و الكومبوننت اللي نتحاجها لتوضيح المثال بالاوامر التالية:

الآن أنشأنا ( second , final ) ككمبوننت

بحيث يكون عندنا في التطبيق ( app,second,final)

سوف نمرر الداتا  من app الى second ومن ثم نطبعه .

هنا راح نغطي الجزء الاول من تمرير البيانات parent -> child

لتمرير البيانات في هذه الحالة يجب ان تضيف التاق الخاص بالكمبوننت child الممرر له واضافة البيانات الخاصة بنا.

السؤال كيف يتم استقبال البيانات في الكومبوننت المستقبل؟

عن طريق Input Annotation

ولكن ماذا لو اردنا عكس العملية ونريد ارسال بيانات بعد استقبالها والتعديل عليها. من child -> parent

الجزء الثاني من تمرير البيانات

child -> parent

سوف نستخدم Output Annotation مع EventEmmiter

EventEmitter

تمكننا من  ارسال البيانات بناء على Event محدد مثل الضغط على زر ارسال بعدها نستخدم emit method لارسال البيانات.

نستدعيها أولا

نستطيع تمرير اي نوع من البيانات ، في هذا المثال سوف نمرر نص فقط string

جرب تكتب اي اسم وتضغط على Send

الآن نقوم ببعض التعديلات لاستقبال البيانات في parent .

سوف نمرر البيانات الى الميثود show ومن ثم طباعتها.

 

 


وبكذا تمت تغطية الجزئين في ارسال البيانات بين components .

 

اترك رد

Back To Top