Angular Academy · درس

إلغاء الاشتراك وتسريبات الذاكرة

تجنبوا التسريبات باستخدام takeUntilDestroyed

الدرس 3 من 413 خطوة

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

مشكلة تسرب الذاكرة

إذا اشتركت في observable طويل العمر داخل مكوّن ولم تلغِ الاشتراك مطلقًا، فسيستمر رد النداء في العمل بعد تدمير المكوّن. ويؤدي ذلك إلى تسرب الذاكرة، وقد يتسبب في أخطاء أو تنفيذ العمل مرتين.

إلغاء الاشتراك يدويًا

الحل الأساسي: خزّن Subscription وألغِ الاشتراك في ngOnDestroy.

import { Component, OnDestroy } from '@angular/core';
import { Subscription, interval } from 'rxjs';

export class WidgetComponent implements OnDestroy {
  private sub = interval(1000).subscribe(n => console.log(n));
  ngOnDestroy() { this.sub.unsubscribe(); }
}

إدارة اشتراكات متعددة

يمكن لـ Subscription واحد جمع الاشتراكات الفرعية باستخدام .add()، ثم يؤدي استدعاء واحد لـ unsubscribe() إلى إنهائها جميعًا.

private subs = new Subscription();
ngOnInit() {
  this.subs.add(a$.subscribe());
  this.subs.add(b$.subscribe());
}
ngOnDestroy() { this.subs.unsubscribe(); }

takeUntilDestroyed

يوفر Angular الدالة takeUntilDestroyed()، التي تُكمل التدفق تلقائيًا عند تدمير المكوّن — ولا تحتاج إلى ngOnDestroy يدوي.

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

export class WidgetComponent {
  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(n => console.log(n));
  }
}

متطلب سياق الحقن

عند استدعاء takeUntilDestroyed() دون وسيطة، يجب تشغيلها في سياق حقن، مثل المُنشئ. وخارج هذا السياق، مرّر DestroyRef بشكل صريح.

import { inject, DestroyRef } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

const destroyRef = inject(DestroyRef);
ngOnInit() {
  source$.pipe(takeUntilDestroyed(destroyRef)).subscribe();
}

نمط takeUntil (التقليدي)

قبل takeUntilDestroyed، كان النمط القياسي يستخدم Subject يُصدر قيمة داخل ngOnDestroy.

private destroy$ = new Subject<void>();
ngOnInit() {
  source$.pipe(takeUntil(this.destroy$)).subscribe();
}
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

لا تحتاج التدفقات المكتملة إلى تنظيف

تُصدر طلبات HttpClient قيمة واحدة ثم تكتمل، لذا تنظف نفسها. وعادةً لا تحتاج إلى إلغاء الاشتراك في طلب HTTP واحد — مع أن takeUntilDestroyed يظل آمنًا.

يتولى async pipe الأمر نيابةً عنك

أفضل نهج للقوالب هو السماح لـ async pipe بالاشتراك وإلغاء الاشتراك تلقائيًا. سنتناوله في الدرس التالي.

// template:
// <div>{{ user$ | async | json }}</div>
// No manual subscribe / unsubscribe needed

علامات تسرّب الاشتراك

غالبًا ما تشير طلبات الشبكة المكررة، أو تشغيل المعالجات بعد الانتقال، أو تزايد الذاكرة في أدوات المطور، أو أخطاء "Cannot read property of destroyed view" إلى نسيان إلغاء الاشتراك.

يتولى toSignal التنظيف تلقائيًا أيضًا

يؤدي تحويل observable إلى signal باستخدام toSignal() أيضًا إلى إلغاء الاشتراك تلقائيًا عند تدمير السياق المالك.

import { toSignal } from '@angular/core/rxjs-interop';

user = toSignal(this.http.get('/api/me'));
// auto-unsubscribed on destroy

اختيار النهج المناسب

فضّل async pipe أو toSignal في القوالب، واستخدم takeUntilDestroyed() للاشتراكات اليدوية، ولا تلجأ إلى مجموعة Subscription إلا عند الحاجة.

تحقق سريع

اختبر مدى فهمك لإلغاء الاشتراك.

أجب عليها في الدرس التفاعلي

مراجعة: إلغاء الاشتراك وتسربات الذاكرة

احرص دائمًا على إنهاء الاشتراكات طويلة العمر.

تُكمل takeUntilDestroyed() التدفق تلقائيًا عند التدمير.
يتولى كل من async pipe وtoSignal() إدارة الاشتراكات نيابةً عنك.
تُكمل طلبات HTTP الفردية نفسها تلقائيًا.

التالي: async pipe بالتفصيل.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 38
الدروس: 144

ابدأ التعلم مجانًا عرض الدورة الكاملة

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

هل درس «إلغاء الاشتراك وتسريبات الذاكرة» مجاني؟

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

ماذا ستتعلم في «إلغاء الاشتراك وتسريبات الذاكرة»؟

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

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

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

كم من الوقت يستغرق درس «إلغاء الاشتراك وتسريبات الذاكرة»؟

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

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

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

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

Observables والاشتراكات
Subjects وBehaviorSubject
إلغاء الاشتراك وتسريبات الذاكرة
‏async Pipe

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