| طريقة التحديث أو التعديل | الدالة البرمجية المستخدمة | الغرض الأساسي ومتى تستخدم |
|---|---|---|
| إسناد قيمة جديدة مباشرة | signal.set(newValue) | تغيير قيمة الإشارة كلياً بغض النظر عن قيمتها السابقة (مثل إعادة تعيين الحقول) |
| تحديث القيمة بناءً على القيمة الحالية | signal.update(current => newValue) | تعديل القيمة استناداً إلى حالتها الحالية (مثل زيادة عداد أو إضافة عنصر) |
| تغيير خصائص الكائنات أو المصفوفات | mutating via update/mutate | تعديل جزء داخل كائن معقد أو إضافة عنصر لمصفوفة بداخل الإشارة |
نستكمل رحلتنا في الغوص داخل نظام الإشارات الحديث في إصدار Angular 22.1 من خلال التعرف بعمق على الإشارات القابلة للكتابة (Writable Signals). بينما تمثل الإشارات العامة وسيلة لتخزين الحالة، تمنحنا الإشارات القابلة للكتابة التحكم الكامل في تعديل وتحديث هذه البيانات بطرق برمجية آمنة ودقيقة ومباشرة عبر دوال مدمجة متخصصة مثل set و update.
تُستخدم عندما ترغب في فرض قيمة جديدة وثابتة للإشارة بغض النظر عن قيمتها السابقة، مثل تفريغ حقل نصي أو إعادة تعيين العداد إلى الصفر (مثال: this.counter.set(0))
تُستخدم عندما تعتمد القيمة الجديدة للإشارة بشكل مباشر على قيمتها الحالية، حيث تمرر دالة رد نداء (Callback) تضمن لك الحصول على أحدث قيمة معالجة وأمان تام في تحديث الحالة (مثال: this.counter.update(val => val + 1)).
| 1 | import { Component, signal } from '@angular/core'; |
| 2 | |
| 3 | @Component({ |
| 4 | selector: 'app-writable-signals-demo', |
| 5 | standalone: true, |
| 6 | template: ` |
| 7 | <div class="box"> |
| 8 | <h3>التحكم في الإشارات القابلة للكتابة</h3> |
| 9 | <p>الرصيد الحالي: <strong>{{ points() }} نقطة</strong></p> |
| 10 | |
| 11 | <!-- استخدام update لتعديل القيمة الحالية --> |
| 12 | <button (click)="addPoints()">إضافة 50 نقطة (update)</button> |
| 13 | |
| 14 | <!-- استخدام set لتعيين قيمة ثابتة مباشرة --> |
| 15 | <button (click)="resetPoints()">تصفير الرصيد (set)</button> |
| 16 | </div> |
| 17 | ` |
| 18 | }) |
| 19 | export class WritableSignalsDemoComponent { |
| 20 | points = signal(100); |
| 21 | |
| 22 | addPoints() { |
| 23 | // تحديث القيمة استناداً للقيم الحالية |
| 24 | this.points.update(currentPoints => currentPoints + 50); |
| 25 | } |
| 26 | |
| 27 | resetPoints() { |
| 28 | // تعيين قيمة مباشرة ومحددة بغض النظر عن القديمة |
| 29 | this.points.set(0); |
| 30 | } |
| 31 | } |
| 1 | import { Component, signal } from '@angular/core'; |
| 2 | import { CommonModule } from '@angular/common'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-signals-array-demo', |
| 6 | standalone: true, |
| 7 | imports: [CommonModule], |
| 8 | template: ` |
| 9 | <div class="list-container"> |
| 10 | <h3>قائمة المهام اليومية</h3> |
| 11 | |
| 12 | <ul> |
| 13 | @for (task of tasks(); track task) { |
| 14 | <li>{{ task }}</li> |
| 15 | } |
| 16 | </ul> |
| 17 | |
| 18 | <button (click)="addNewTask()">إضافة مهمة جديدة (update)</button> |
| 19 | <button (click)="clearAllTasks()">حذف الكل (set)</button> |
| 20 | </div> |
| 21 | ` |
| 22 | }) |
| 23 | export class SignalsArrayDemoComponent { |
| 24 | // تعريف إشارة تحتوى على مصفوفة |
| 25 | tasks = signal(['تعلم أساسيات أنجولر', 'بناء المكونات المستقلة']); |
| 26 | |
| 27 | addNewTask() { |
| 28 | // إنشاء مصفوفة جديدة وإضافتها باستخدام update لضمان سلامة الإشارات |
| 29 | this.tasks.update(currentTasks => [...currentTasks, 'دراسة نظام الإشارات']); |
| 30 | } |
| 31 | |
| 32 | clearAllTasks() { |
| 33 | // تفريغ المصفوفة كلياً باستخدام set |
| 34 | this.tasks.set([]); |
| 35 | } |
| 36 | } |