كيفية استخدام Output Decorator في Angular

في Angular ، يمكن أن تحتوي صفحة الويب على العديد من المكونات المختلفة القابلة لإعادة الاستخدام. يحتوي كل مكون عادةً على منطق TypeScript الخاص به ، وقالب HTML ، وتصميم CSS.

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

يمكنك أيضًا استخدام مصمم الإخراج للاستماع إلى الأحداث التي تحدث في المكون الفرعي.

كيفية إضافة مُزخرف الإخراج إلى مكون فرعي

أولاً ، ستحتاج إلى إنشاء تطبيق Angular جديد بمكون أصلي ومكون فرعي.

بمجرد أن يكون لديك مكون رئيسي وفرع ، يمكنك استخدام مصمم الإخراج لنقل البيانات والاستماع إلى الأحداث بين المكونين.

1. إنشاء ملف تطبيق الزاوي. بشكل افتراضي ، "التطبيق" هو ​​اسم مكون الجذر. يتضمن هذا المكون ثلاثة ملفات رئيسية: "app.component.html" و "app.component.css" و "app.component.ts".
instagram viewer
2. في هذا المثال ، سيعمل مكوِّن "التطبيق" كمكوِّن أصلي. استبدل كل المحتوى في "app.component.html" بما يلي:

   <شعبةفصل="العنصر الأصل">
   <h1> هذا هو المكون الرئيسي h1>
   شعبة>

3. أضف بعض الأنماط إلى مكون التطبيق الرئيسي في "app.component.css":

   . أولياء الأمور {
   خط العائلة: اريال, هيلفيتيكا, بلا الرقيق;
   لون الخلفية: لايت كورال;
   حشوة: 20مقصف
   }

4. استخدم الأمر "ng create component" إلى إنشاء مكون Angular جديد يسمى "مكون البيانات". في هذا المثال ، سيمثل "مكون البيانات" المكون الفرعي.

   ng g c مكون البيانات

5. أضف محتوى إلى المكون الفرعي في "data-component.component.html". استبدل المحتوى الحالي لإضافة زر جديد. اربط الزر بوظيفة سيتم تشغيلها عندما ينقر المستخدم عليها:

   <شعبةفصل="المكون الفرعي">
   <ص> هذا هو المكون الفرعي ص>
   <زر (انقر)="onButtonClick ()">انقر فوق ليزر>
   شعبة>

6. أضف بعض الأنماط إلى المكون الفرعي في "data-component.component.css":

   .child مكون {
   خط العائلة: اريال, هيلفيتيكا, بلا الرقيق;
   لون الخلفية: lightblue;
   هامِش: 20مقصف;
   حشوة: 20مقصف
   }

7. أضف الدالة onButtonClick () إلى ملف TypeScript الخاص بالمكون ، في "data-component.component.ts":

   onButtonClick () {
   }

8. لا يزال داخل ملف TypeScript ، أضف "Output" و "EventEmitter" إلى قائمة الاستيراد:

   يستورد {مكون ، إخراج ، حدث ، OnInit} من"@ الزاوي / الأساسية";

9. داخل فئة DataComponentComponent ، قم بتعريف متغير الإخراج للمكون المسمى "buttonWasClicked". سيكون هذا صانع الحدث. EventEmitter عبارة عن فئة مضمنة تسمح لك بإبلاغ مكون آخر عند حدوث حدث ما.

   يصدّرفصل DataComponentComponent الأدوات OnInit {
   @انتاج() buttonWasClicked = جديد EventEmitter <فارغ>();
   // ...
   }

10. استخدم باعث الحدث "buttonWasClicked" داخل وظيفة onButtonClick (). عندما ينقر المستخدم على الزر ، سيرسل مكون البيانات هذا الحدث إلى مكون التطبيق الأصلي.

    onButtonClick () {
    هذا.buttonWasClicked.emit () ؛
    }

كيف تستمع إلى الأحداث في المكون الفرعي من المكون الرئيسي

لاستخدام خاصية الإخراج للمكون الفرعي ، ستحتاج إلى الاستماع إلى الحدث المنبعث من المكون الرئيسي.

1. استخدم المكوِّن الفرعي داخل "app.component.html". يمكنك إضافة إخراج "buttonWasClicked" كخاصية عند إنشاء علامة HTML. اربط الحدث بوظيفة جديدة.

   <مكون بيانات التطبيق (زر تم النقر عليه)="buttonInChildComponentWasClicked ()">مكون بيانات التطبيق>

2. داخل "app.component.ts" ، أضف الوظيفة الجديدة للتعامل مع حدث النقر على الزر عند حدوثه في المكون الفرعي. قم بإنشاء رسالة عندما ينقر المستخدم على الزر.

   رسالة: خيط = ""
   buttonInChildComponentWasClicked () {
   هذا. الرسالة = "تم النقر فوق الزر الموجود في المكون الفرعي";
   }

3. اعرض الرسالة في "app.component.html":

   <ص>{{رسالة}}ص>

4. اكتب الأمر "ng serve" في محطة لتشغيل تطبيق Angular الخاص بك. افتحه في مستعرض ويب على المضيف المحلي: 4200. يستخدم المكونان الأصلي والفرعي ألوان خلفية مختلفة لتسهيل التمييز بينهما.
5. اضغط على انقر فوق لي زر. سيرسل المكون الفرعي الحدث إلى المكون الرئيسي ، والذي سيعرض الرسالة.

كيفية إرسال البيانات من مكون فرعي إلى مكون أصلي

يمكنك أيضًا إرسال البيانات من المكون الفرعي إلى المكون الرئيسي.

1. في "data-component.component.ts" ، أضف متغيرًا لتخزين قائمة سلاسل تحتوي على بعض البيانات.

   listOfPeople: خيط[] = ["جوي", 'جون', 'جوامع'];

2. قم بتعديل نوع الإرجاع الخاص بباعث الحدث buttonWasClicked. قم بتغييره من فراغ إلى سلسلة [] ، لمطابقة قائمة السلاسل التي أعلنتها في الخطوة السابقة:

   @انتاج() buttonWasClicked = جديد EventEmitter <خيط[]>();

3. قم بتعديل وظيفة onButtonClick (). عند إرسال الحدث إلى المكون الرئيسي ، أضف البيانات كوسيطة إلى الدالة emit ():

   onButtonClick () {
   هذا.buttonWasClicked.emit (هذا.listOfPeople) ؛
   }

4. في "app.component.html" ، عدّل علامة "app-data-component". إضافة "الحدث $" في وظيفة buttonInChildComponentWasClicked (). هذا يحتوي على البيانات المرسلة من المكون الفرعي.

   <مكون بيانات التطبيق (زر تم النقر عليه)="buttonInChildComponentWasClicked (حدث $)">مكون بيانات التطبيق>

5. قم بتحديث الوظيفة في "app.component.ts" لإضافة معلمة البيانات:

   buttonInChildComponentWasClicked (dataFromChild: خيط[]) {
   هذا. الرسالة = "تم النقر فوق الزر الموجود في المكون الفرعي";
   }

6. إضافة متغير جديد يسمى "البيانات" لتخزين البيانات القادمة من المكون الفرعي:

   رسالة: خيط = ""
   بيانات: خيط[] = []
   buttonInChildComponentWasClicked (dataFromChild: خيط[]) {
   هذا. الرسالة = "تم النقر فوق الزر الموجود في المكون الفرعي";
   هذا.data = dataFromChild ؛
   }

7. اعرض البيانات على صفحة HTML:

   <ص>{{data.join ('،')}}ص>

8. اكتب الأمر "ng serve" في محطة لتشغيل تطبيق Angular الخاص بك. افتحه في مستعرض ويب على المضيف المحلي: 4200.
9. اضغط على انقر فوق لي زر. سيرسل المكون الفرعي البيانات من المكون الفرعي إلى المكون الرئيسي.

إرسال البيانات إلى مكونات أخرى باستخدام Output Decorator

هناك ديكورات أخرى يمكنك استخدامها في Angular ، مثل Input decorator أو Component decorator. يمكنك معرفة المزيد حول كيفية استخدام أدوات تزيين أخرى في Angular لتبسيط التعليمات البرمجية الخاصة بك.