Angular Academy · درس

مخازن الإشارات في الخدمات

احفظ حالة التطبيق في خدمات تعتمد على الإشارات

مخازن الإشارات في الخدمات درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

الإشارات كحالة

الإشارات في Angular هي قيم تفاعلية تُخطر المستهلكين عند تغيرها. تحتفظ الإشارة بقيمة، وتعيد تنفيذ أي عملية حسابية أو قالب يقرأها.

يتيح تخزين الإشارات داخل خدمة @Injectable لعدة مكونات مشاركة الحالة التفاعلية نفسها.

مخزن إشارات بسيط

أنشئوا خدمة واحتفظوا بالحالة داخل signal(). أبقوا الإشارة القابلة للكتابة خاصة، وأتيحوا واجهة للقراءة فقط.

import { Injectable, signal } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class CounterStore {
  private _count = signal(0);
  readonly count = this._count.asReadonly();

  increment() { this._count.update(c => c + 1); }
}

لماذا يكون providedIn هو root

يجعل providedIn: 'root' الخدمة نسخة واحدة على مستوى التطبيق بأكمله. وكل مكون يحقنها يشارك نسخة الإشارة نفسها تمامًا، لذلك تظل الحالة متزامنة.

قراءة الإشارة

استدعوا الإشارة كما لو كانت دالة لقراءة قيمتها. داخل القالب، يتتبع Angular عملية القراءة ويحدّث DOM تلقائيًا عند تغير القيمة.

import { Component, inject } from '@angular/core';
import { CounterStore } from './counter.store';

@Component({
  selector: 'app-counter',
  template: '<button (click)="store.increment()">{{ store.count() }}</button>'
})
export class CounterComponent {
  store = inject(CounterStore);
}

يحمي asReadonly الحالة

تعيد asReadonly() إشارة يمكن قراءتها دون الكتابة إليها. ولا تستطيع المكونات استدعاء set() أو update() عليها عرضًا، لذلك تمر جميع التعديلات عبر أساليب المخزن.

set في مقابل update

استخدموا set(value) عندما تكون القيمة التالية متاحة لديكم مباشرة. واستخدموا update(fn) عندما تعتمد القيمة التالية على القيمة الحالية.

private _user = signal<User | null>(null);

setUser(u: User) { this._user.set(u); }
clearUser() { this._user.set(null); }
touch() { this._user.update(u => u ? { ...u, seen: true } : u); }

إشارات متعددة لكل مخزن

يمكن للمخزن أن يحتوي على عدة إشارات تمثل أجزاء مختلفة من الحالة. أبقوا كل إشارة قابلة للكتابة خاصة، وأتيحوا نظائرها للقراءة فقط.

private _items = signal<Item[]>([]);
private _loading = signal(false);

readonly items = this._items.asReadonly();
readonly loading = this._loading.asReadonly();

تغليف المنطق داخل الأساليب

توجد قواعد العمل في أساليب المخزن، لا في المكونات. تستدعي المكونات أساليب توضّح المقصود مثل addToCart(item)، ويقرر المخزن كيفية تغير الحالة.

addToCart(item: Item) {
  this._items.update(list => [...list, item]);
}
removeFromCart(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

لا حاجة إلى الاشتراكات

بخلاف الخدمات المستندة إلى RxJS، لا تحتاج مخازن الإشارات إلى subscribe() ولا إلى إلغاء الاشتراك يدويًا. تؤدي قراءة الإشارة في القالب إلى إعداد التفاعلية، ويتولى Angular تنظيفها عند تدمير المكون.

الحقن باستخدام inject()

تعمل الدالة inject() في البُنى، ومهيئات الحقول، ودوال المصنع. وهي الطريقة الحديثة للحصول على نسخة المخزن.

export class CartComponent {
  private store = inject(CartStore);
  items = this.store.items; // read-only signal
}

اختبار مخزن الإشارات

مخازن الإشارات فئات عادية، لذلك تكون الاختبارات بسيطة: أنشئوا نسخة، واستدعوا أسلوبًا، واقرؤوا قيمة الإشارة بصورة متزامنة. ولا حاجة إلى إعدادات للمعالجة غير المتزامنة.

it('increments', () => {
  const store = new CounterStore();
  store.increment();
  expect(store.count()).toBe(1);
});

اختبار سريع

اختبروا فهمكم لمخازن الإشارات.

خلاصة

تعلمتم بناء مخزن يستند إلى الإشارات: إبقاء الإشارات القابلة للكتابة خاصة، وإتاحة واجهات asReadonly() للقراءة، وتعديل الحالة عبر set/update داخل الأساليب، وحقن النسخة الوحيدة باستخدام inject(). لا اشتراكات، واختبار سهل، وحالة تفاعلية مشتركة.

الأسئلة الشائعة

هل درس «مخازن الإشارات في الخدمات» مجاني؟

نعم — نص درس «مخازن الإشارات في الخدمات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «مخازن الإشارات في الخدمات»؟

احفظ حالة التطبيق في خدمات تعتمد على الإشارات تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «مخازن الإشارات في الخدمات»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy