تبادل البيانات بين عناصر Angular 2 باستخدام EventEmitter
عند النظر إلى الشيفرة المقدمة، يظهر أنك تستخدم Angular 2 وتقوم بإرسال حدث من العنصر الابن إلى العنصر الأب باستخدام EventEmitter
. ومع ذلك، يبدو أن هناك تحديثًا في القيمة التي يتم إرسالها للحدث، وهو الأمر الذي يثير استفسارك حول كيفية تمرير المعلومات بشكل صحيح إلى العنصر الأب.
أولاً وقبل كل شيء، يبدو أن هناك صيانة غير ضرورية في الكود. في Angular 2، يمكنك استخدام @Output
decorator لتعريف الـ EventEmitter
دون الحاجة إلى استخدام outputs
array في metadata. سنقوم أولاً بتحديث الشيفرة لاستخدام هذا التحسين:
-
كيفية استخدام دوال الأرو في Angular 214/03/2024
-
Angular 2: تنفيذ مراقبة تغيير البيانات24/03/2024
typescriptimport { Component, EventEmitter, Output } from 'angular2/core';
@Component({
template: `
- {{product.name}}
`,
selector: 'product-picker'
})
export class ProductPicker {
products: Array<any>;
@Output() pick: EventEmitter<any> = new EventEmitter();
constructor() {
this.products = [
{ id: 1, name: 'first product' },
{ id: 2, name: 'second product' },
{ id: 3, name: 'third product' },
];
}
onClick(product) {
this.pick.emit(product);
}
}
@Component({
selector: 'my-app',
template: `
Pick a product
You picked: {{name}}
`,
directives: [ProductPicker]
})
export class App {
name: string = 'nothing';
onPick(item) {
if (typeof item == 'undefined') {
console.log("item is undefined!");
} else {
this.name = item.name;
}
}
}
بعد هذا التحديث، يجب أن تعمل الشيفرة بشكل صحيح. يرجى ملاحظة أننا قمنا بتعديل الدالة onPick
في العنصر الأب لتقبل الحدث مباشرة وليس معلمة واحدة، وذلك باستخدام $event
.
المزيد من المعلومات
في شرح الشيفرة، يمكننا التفصيل أكثر حول كيفية عمل Angular 2 وكيف يتم تبادل البيانات بين العناصر الفرعية والعناصر الرئيسية باستخدام EventEmitter
.
-
الشيفرة للعنصر الابن (
ProductPicker
):- يتم استيراد
Component
وEventEmitter
وOutput
من مكتبةangular2/core
. - يتم تعريف العنصر
ProductPicker
باستخدام الديكورات (@Component
)، حيث يتم تحديد القالب (template
) والمحدد (selector
) للعنصر. - يتم استخدام
*ngFor
لعرض قائمة المنتجات وربط الدالةonClick
بحدث النقر (click
) لكل عنصر في القائمة. - يتم إرسال المنتج المختار باستخدام
this.pick.emit(product)
عند النقر على عنصر.
- يتم استيراد
-
الشيفرة للعنصر الرئيسي (
App
):- يتم تعريف العنصر
App
باستخدام الديكورات (@Component
)، حيث يتم تحديد القالب (template
) والمحدد (selector
) للعنصر. - يتم استيراد
ProductPicker
كعنصر فرعي ويتم إضافته كتوجيه (directives
) في metadata. - يتم استخدام الدالة
onPick
للتحقق مما إذا كان المنتج المختار غير معرف (undefined
) أم لا، ويتم تحديث قيمةname
بناءً على ذلك.
- يتم تعريف العنصر
-
التبادل بين العناصر:
- يتم استخدام
@Output
لتعريف خاصيةpick
كـEventEmitter
في العنصر الفرعي (ProductPicker
). - يتم استخدام
(pick)="onPick($event)"
في العنصر الرئيسي (App
) للاستماع إلى الحدث وتحديد الدالة المرتبطة (onPick
) للتعامل معه.
- يتم استخدام
-
تحسين الشيفرة:
- تم استخدام
@Output
بدلاً من الطريقة القديمة باستخدامoutputs
في metadata لتعريفEventEmitter
. - تم تحديث الدالة
onPick
لتقبل$event
مباشرة بدلاً من استخدام معلمة واحدة.
- تم استخدام
بهذا، يتم تحقيق تبادل البيانات بين العناصر بشكل صحيح باستخدام EventEmitter
ويمكنك الآن فهم الطريقة التي يتم بها إرسال المعلومات من العنصر الفرعي إلى العنصر الرئيسي في Angular 2.