تحسين نظام الحدث في Angular 2: استخدام تقنية الانتشار لنقل الأحداث في شجرة العناصر

في هذا المثال البرمجي الخاص بك، يتعلق الأمر بإرسال حدث “addChild” إلى العناصر الفرعية “tree-item” في الشجرة الهرمية. ومن الواضح أن الحدث يتم نقله بشكل صحيح من خلال استخدام السطر:

htmlCopy code
<span [hidden]="!isFolder" (click)="addChild.emit(model)">Add Childspan>

ومع ذلك، يظهر أن الحدث يتم استقباله فقط من العنصر الجذري في الشجرة، وهو العنصر “tree-item” الذي يتم تمريره كجزء من القالب الرئيسي للأب.

لتحقيق فعالية الحدث من أي “tree-item” في الشجرة، يمكننا استخدام تقنية تعرف باسم “Event Bubbling”، حيث يمكن للحدث أن ينتقل من العنصر الفرعي إلى العنصر الأب ومن ثم إلى العناصر الأخرى في الشجرة.

لتحقيق ذلك، يجب تحديد الحدث في مكان يمكن أن يتم فيه تداوله بين جميع العناصر الفرعية والعنصر الجذري. يمكن تعديل الكود كما يلي:

htmlCopy code
<span [hidden]="!isFolder" (click)="bubbleUp($event, model)">Add Childspan>

ثم يمكن إضافة الدالة “bubbleUp” في المكون الخاص بك لمعالجة نقل الحدث إلى الأعلى:

typescriptCopy code
bubbleUp(event: any, model: any) {
  // هنا يمكنك تنفيذ العمليات اللازمة
  // ثم إعادة إرسال الحدث إلى الأعلى
  this.addChild.emit(model);
  event.stopPropagation(); // لمنع انتشار الحدث إلى العناصر الأخرى
}

بهذه الطريقة، سيتم نقل الحدث “addChild” إلى الأعلى في الشجرة، مما يسمح لك باستخدامه من أي “tree-item” تحتاج إليه.

في عالم تطوير الويب واستخدام Angular 2، يُظهر الكود المقدم كيف يمكن تكوين نظام شجري لعناصر الواجهة الرسومية باستخدام مكونات Angular. الكود يظهر قالبًا لعنصر الشجرة (tree-item) يستخدمه العنصر الأب (ul) لتحديد الهيكل الشجري.

في القالب، يتم ربط الخاصية “model” بنموذج البيانات المرتبط بكل عنصر في الشجرة. يظهر الحدث “(addChild)” كواجهة للسماح بإضافة عنصر جديد إلى الشجرة. ويتم استخدام الحقل “(click)” لتحديد استجابة العنصر عند النقر عليه، حيث يظهر رمز “Add Child” للسماح بإضافة عنصر فرعي.

التحدي الذي تطرحه يتعلق بالرغبة في إمكانية نقل حدث “(addChild)” من أي عنصر فرعي في الشجرة بدلاً من الحصول عليه فقط من الجذر. وهو هدف يمكن تحقيقه من خلال تقنية الانتشار (Event Bubbling).

تم تعديل الرمز لتحقيق ذلك من خلال إضافة دالة “bubbleUp” التي تستمع إلى الحدث وتنقله إلى العناصر الفرعية. يتم تنفيذ العمليات اللازمة، ثم يتم إعادة إرسال الحدث إلى الأعلى باستخدام “this.addChild.emit(model)”.

يُنصح بتضمين هذه العملية في المكون الخاص بك للتحكم في سير الحدث في شجرة العناصر. يمكنك استخدام “event.stopPropagation()” لمنع انتشار الحدث إلى العناصر الفرعية الأخرى والحفاظ على تنفيذ الحدث في العنصر الحالي فقط.

هذا النهج يجمع بين القوة والمرونة في إنشاء هيكل شجري قابل للتوسع والتفاعلي في تطبيق Angular 2.