24. مشاركة البيانات بين المكونات باستخدام الخدمات

لقد تعلمنا عن @Input و @Output لتواصل الأب-الابن. ولكن ماذا عن التواصل بين المكونات التي لا ترتبط مباشرة (شقيقة، أو أبناء عم، أو مكونات بعيدة)؟ توفر الخدمات الآلية المثالية لذلك، مستفيدة من الطبيعة الفردية (singleton) للخدمات المقدمة على مستوى الجذر.

خدمة البيانات المشتركة

سنقوم بإنشاء خدمة تحمل البيانات وتوفر أساليب للمكونات لتحديث تلك البيانات أو استردادها.

typescript // shared-state.service.ts import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' }) export class SharedStateService { private messageSource = 'Initial Message';

getMessage(): string { return this.messageSource; }

updateMessage(newMessage: string): void { this.messageSource = newMessage; } }

1. المكون A (المُرسِل)

typescript // sender.component.ts constructor(private stateService: SharedStateService) { }

sendUpdate(input: string) { this.stateService.updateMessage(input); }

2. المكون B (المُستقبِل)

typescript // receiver.component.ts public currentMessage: string;

constructor(private stateService: SharedStateService) { this.currentMessage = this.stateService.getMessage(); }

// نحتاج إلى طريقة للكشف عن التغييرات... // في الدروس التالية، سنستخدم RxJS (Observables) لجعل هذا ديناميكياً وتفاعلياً. // في الوقت الحالي، سيحتاج هذا المكون إلى التحديث أو التحقق يدوياً.

القيود: الطريقة المذكورة أعلاه ليست تفاعلية؛ يجب على المكون B استدعاء getMessage() بنشاط لجلب البيانات. ستحل الدروس اللاحقة حول RxJS هذه المشكلة عن طريق السماح للخدمات بإخطار المكونات بالتغييرات بشكل غير متزامن.