تبادل البيانات بين عناصر Angular 2 باستخدام EventEmitter

عند النظر إلى الشيفرة المقدمة، يظهر أنك تستخدم Angular 2 وتقوم بإرسال حدث من العنصر الابن إلى العنصر الأب باستخدام EventEmitter. ومع ذلك، يبدو أن هناك تحديثًا في القيمة التي يتم إرسالها للحدث، وهو الأمر الذي يثير استفسارك حول كيفية تمرير المعلومات بشكل صحيح إلى العنصر الأب.

أولاً وقبل كل شيء، يبدو أن هناك صيانة غير ضرورية في الكود. في Angular 2، يمكنك استخدام @Output decorator لتعريف الـ EventEmitter دون الحاجة إلى استخدام outputs array في metadata. سنقوم أولاً بتحديث الشيفرة لاستخدام هذا التحسين:

typescriptCopy code
import { 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.

1. الشيفرة للعنصر الابن (ProductPicker):

   • يتم استيراد Component و EventEmitter و Output من مكتبة angular2/core.
   • يتم تعريف العنصر ProductPicker باستخدام الديكورات (@Component)، حيث يتم تحديد القالب (template) والمحدد (selector) للعنصر.
   • يتم استخدام *ngFor لعرض قائمة المنتجات وربط الدالة onClick بحدث النقر (click) لكل عنصر في القائمة.
   • يتم إرسال المنتج المختار باستخدام this.pick.emit(product) عند النقر على عنصر.

2. الشيفرة للعنصر الرئيسي (App):

   • يتم تعريف العنصر App باستخدام الديكورات (@Component)، حيث يتم تحديد القالب (template) والمحدد (selector) للعنصر.
   • يتم استيراد ProductPicker كعنصر فرعي ويتم إضافته كتوجيه (directives) في metadata.
   • يتم استخدام الدالة onPick للتحقق مما إذا كان المنتج المختار غير معرف (undefined) أم لا، ويتم تحديث قيمة name بناءً على ذلك.

3. التبادل بين العناصر:

   • يتم استخدام @Output لتعريف خاصية pick كـ EventEmitter في العنصر الفرعي (ProductPicker).
   • يتم استخدام (pick)="onPick($event)" في العنصر الرئيسي (App) للاستماع إلى الحدث وتحديد الدالة المرتبطة (onPick) للتعامل معه.

4. تحسين الشيفرة:

   • تم استخدام @Output بدلاً من الطريقة القديمة باستخدام outputs في metadata لتعريف EventEmitter.
   • تم تحديث الدالة onPick لتقبل $event مباشرة بدلاً من استخدام معلمة واحدة.

بهذا، يتم تحقيق تبادل البيانات بين العناصر بشكل صحيح باستخدام EventEmitter ويمكنك الآن فهم الطريقة التي يتم بها إرسال المعلومات من العنصر الفرعي إلى العنصر الرئيسي في Angular 2.