60. استخدام أنبوب Async للإدارة التلقائية للاشتراكات

يُعد AsyncPipe (| async) أداة Angular الأكثر فعالية لإدارة Observables في القوالب. إنه يتعامل مع الاشتراك، واستخراج القيمة، وإلغاء الاشتراك التلقائي عند تدمير المكون.

المشكلة: الاشتراكات اليدوية

يتطلب الاشتراك اليدوي في فئة المكون تخزين Subscription واستدعاء unsubscribe() في ngOnDestroy لمنع تسرب الذاكرة.

typescript // طريقة تسرب الذاكرة: ngOnInit() { this.dataService.getData().subscribe(data => this.data = data); // إلغاء الاشتراك مفقود، مما يسبب تسرباً إذا تم تدمير المكون }

الحل: AsyncPipe

يأخذ AsyncPipe Observable (أو Promise) كمدخل، ويشترك فيه، ويُرجع أحدث قيمة مُطلَقة.

فئة المكون (لا حاجة للاشتراك)

typescript // data-viewer.component.ts import { Observable } from 'rxjs'; import { DataService } from '../data.service';

export class DataViewerComponent implements OnInit { // تخزين Observable نفسه، وليس مصفوفة البيانات products$: Observable<Product[]> | undefined;

constructor(private dataService: DataService) { }

ngOnInit(): void { this.products$ = this.dataService.getProducts(); } }

الاستخدام في القالب

html

الفوائد:

1. السلامة: صفر تسرب في الذاكرة بسبب إلغاء الاشتراك التلقائي.
2. الثبات: يحافظ على نظافة منطق المكون، مع التركيز على تدفقات Observable، وليس الآثار الجانبية.
3. الأداء: يعمل بشكل طبيعي مع اكتشاف التغيير في Angular، خاصة عند استخدام استراتيجية OnPush (القسم المتقدم التالي).