| معيار المقارنة الهندسية | التواصل من الأعلى للأسفل (Parent to Child) | التواصل من الأسفل للأعلى (Child to Parent) | التواصل الأفقي / المشترك (Cross-component) |
|---|---|---|---|
| الآلية البرمجية المستخدمة | استخدام المدخلات (Inputs / Signals) | استخدام المخرجات (Outputs / Model) | استخدام الخدمات وحقن التبعيات (Services & Injectable) |
| الاتجاه المعماري لتدفق البيانات | أحادي الاتجاه من الأب إلى الابن | إرسال الأحداث والتحديثات من الابن للأب | مشاركة البيانات عبر نطاق أوسع خارج شجرة المكونات |
| الهدف الوظيفي الأساسي | تمرير الإعدادات والخصائص والبيانات للعرض | إخطار الأب بتغيرات أو إجراءات قام بها المستخدم | مشاركة الحالة البرمجية بين مكونات غير مترابطة مباشرة |
لنبدأ الفصل السابع من المنهاج الهندسي لأحدث إصدارات Angular 22.1، حيث نغطي في هذا الدرس الأول نظرة عامة على طرق التواصل. في الهندسة البرمجية للمكونات المستقلة (Standalone Components)، يُعد تنظيم تدفق البيانات وإدارتها بين المكونات المختلفة ركيزة محورية. سنتناول في هذا الدرس الفلسفة العامة لتوزيع المسؤوليات واختيار الأسلوب المعماري الأنسب لنقل البيانات والأحداث.
تعتمد أنجولر بشكل أساسي على تدفق البيانات من الأعلى إلى الأسفل، مما يجعل تتبع الحالة وتصحيح الأخطاء أمراً منظماً ومباشراً عبر رصد التغيرات في الإشارات (Signals).
يضمن توزيع قنوات الاتصال بشكل سليم فصل المسؤوليات بوضوح، بحيث يركز المكون الفرعي على العرض والتفاعل البسيط، بينما يتولى المكون الأب أو الطبقات الخدمية إدارة الحالة الكلية للتطبيق.
| 1 | import { Component, signal } from '@angular/core'; |
| 2 | |
| 3 | @Component({ |
| 4 | selector: 'app-communication-overview', |
| 5 | standalone: true, |
| 6 | template: ` |
| 7 | <div class="overview-container"> |
| 8 | <h2>نظرة عامة على قنوات التواصل في أنجولر</h2> |
| 9 | <p>حالة النظام المعماري: <strong>{{ systemState() }}</strong></p> |
| 10 | </div> |
| 11 | `, |
| 12 | styleUrl: './communication-overview.component.css' |
| 13 | }) |
| 14 | export class CommunicationOverviewComponent { |
| 15 | systemState = signal<string>('جاهز ومنظم بكفاءة عالية في إصدار 22.1'); |
| 16 | } |
| 1 | <div class="overview-container"> |
| 2 | <h3>محطة نظرة عامة على طرق التواصل</h3> |
| 3 | <div class="overview-box"> |
| 4 | <p>تتم إدارة تدفق البيانات هنا عبر مسارات اتصال هندسية ومحددة بدقة.</p> |
| 5 | </div> |
| 6 | </div> |
| 1 | .overview-container { |
| 2 | padding: 24px; |
| 3 | background: #0f172a; |
| 4 | color: #f8fafc; |
| 5 | border-radius: 12px; |
| 6 | box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); |
| 7 | margin: 16px; |
| 8 | } |
| 9 | |
| 10 | .overview-box { |
| 11 | background: #1e293b; |
| 12 | padding: 16px; |
| 13 | border-radius: 8px; |
| 14 | border-left: 4px solid #38bdf8; |
| 15 | margin-top: 12px; |
| 16 | } |