| مستوى التفاعل البرمجي | آلية تتبع التغيرات | الهدف من تنفيذ الأوامر الجانبية |
|---|---|---|
| الإشارات المحسوبة (Computed) | تتبع تلقائي بحت ونقي (Pure) | استنتاج بيانات جديدة للاستخدام الداخلي دون أي أوامر جانبية |
| التأثيرات المتقدمة (Effects) | تتبع متسلسل يربط الحالة بالأحداث | تنفيذ مهام خارجية أو تفاعلية (مثل إرسال طلبات HTTP أو التخزين) استجابة للتغيير |
ننتقل في هذا الدرس إلى مرحلة متقدمة في هندسة التطبيقات عبر إصدار Angular 22.1، وهي دمج آليات تتابع التغييرات وتفعيل الأوامر الجانبية عبر التأثيرات (Effects). يتيح لك هذا النهج ليس فقط مراقبة كيف تتسلسل البيانات وتنتقل عبر المكونات، بل وأيضاً تشغيل إجراءات برمجية متقدمة تستجيب لتلك التغيرات المترابطة بدقة متناهية، مما يضمن تزامن النظام الداخلي مع أي متطلبات أو أحداث خارجية.
عندما تتغير إشارة رئيسية، تتسلسل التغييرات لتمر عبر الإشارات المحسوبة وصولاً إلى التأثيرات. هذا التتابع المنظم يضمن تنفيذ الأوامر الجانبية بالترتيب الصحيح ودون تداخل عشوائي في البيانات.
تعمل التأثيرات المرتبطة بتتابع التغييرات بشكل غير متزامن آمن بعد استقرار دورة التحديث في المكون، مما يمنع حدوث تضارب في قيم DOM أو أخطاء في قراءة الحالة أثناء عمليات الرندر (Render).
| 1 | import { Component, signal, effect } from '@angular/core'; |
| 2 | import { FormsModule } from '@angular/forms'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-change-tracking-effect', |
| 6 | standalone: true, |
| 7 | imports: [FormsModule], |
| 8 | template: ` |
| 9 | <div class="tracker-box"> |
| 10 | <h3>لوحة تتبع التغييرات والأوامر الجانبية</h3> |
| 11 | |
| 12 | <label>حالة الاتصال بالشبكة:</label> |
| 13 | <select [(ngModel)]="connectionStatus"> |
| 14 | <option value="online">متصل (Online)</option> |
| 15 | <option value="offline">غير متصل (Offline)</option> |
| 16 | </select> |
| 17 | |
| 18 | <p>عدد مرات تغيير الحالة المسجلة: <strong>{{ changeCounter() }}</strong></p> |
| 19 | </div> |
| 20 | ` |
| 21 | }) |
| 22 | export class ChangeTrackingEffectComponent { |
| 23 | connectionStatus = signal('online'); |
| 24 | changeCounter = signal(0); |
| 25 | |
| 26 | constructor() { |
| 27 | // تأثير متقدم يتتبع تغير الحالة وينفذ أمراً جانبياً متسلسلاً |
| 28 | effect(() => { |
| 29 | const status = this.connectionStatus(); |
| 30 | |
| 31 | // أمر جانبي: زيادة عداد التغييرات وتتبع التسلسل |
| 32 | this.changeCounter.update(c => c + 1); |
| 33 | |
| 34 | // أمر جانبي: إرسال سجل بالحدث الخارجي |
| 35 | console.log(`[تتبع التغييرات]: تغيرت حالة الشبكة إلى -> ${status}`); |
| 36 | }); |
| 37 | } |
| 38 | } |
| 1 | import { Component, signal, effect } from '@angular/core'; |
| 2 | import { FormsModule } from '@angular/forms'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-search-tracking-demo', |
| 6 | standalone: true, |
| 7 | imports: [FormsModule], |
| 8 | template: ` |
| 9 | <div class="search-panel"> |
| 10 | <h3>التتبع المتقدم لإدخال البحث</h3> |
| 11 | |
| 12 | <input type="text" [(ngModel)]="searchTerm" placeholder="اكتب للبحث..."> |
| 13 | <p>كلمة البحث الحالية: <strong>{{ searchTerm() }}</strong></p> |
| 14 | </div> |
| 15 | ` |
| 16 | }) |
| 17 | export class SearchTrackingDemoComponent { |
| 18 | searchTerm = signal(''); |
| 19 | |
| 20 | constructor() { |
| 21 | // تأثير يتتبع تسلسل إدخال المستخدم وينفذ أمراً جانبياً مشروطاً |
| 22 | effect(() => { |
| 23 | const term = this.searchTerm(); |
| 24 | |
| 25 | if (term.length > 2) { |
| 26 | console.log(`[أمر جانبي]: بدء جلب نتائج البحث عن الكلمة: "${term}" من الخادم...`); |
| 27 | } else { |
| 28 | console.log('[أمر جانبي]: نص البحث قصير جداً، تم إلغاء الطلب.'); |
| 29 | } |
| 30 | }); |
| 31 | } |
| 32 | } |