Angular Academy · Lezione

Annullamento delle sottoscrizioni e memory leak

Eviti le perdite di memoria con takeUntilDestroyed.

Annullamento delle sottoscrizioni e memory leak è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Il problema delle perdite di memoria

Se ci si sottoscrive a un observable di lunga durata in un componente senza annullare mai la sottoscrizione, il callback continua a essere eseguito dopo la distruzione del componente. Questo causa una perdita di memoria e può provocare errori o attività duplicate.

Annullamento manuale della sottoscrizione

La soluzione di base consiste nel salvare la Subscription e annullarla in 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(); }
}

Gestire più sottoscrizioni

Una singola Subscription può raccogliere sottoscrizioni figlie con .add(); una sola chiamata a unsubscribe() le interrompe tutte.

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

takeUntilDestroyed

Angular fornisce takeUntilDestroyed(), che completa automaticamente il flusso quando il componente viene distrutto: non serve un ngOnDestroy manuale.

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

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

Requisito del contesto di injection

Se chiamato senza argomenti, takeUntilDestroyed() deve essere eseguito in un contesto di injection, ad esempio nel costruttore. Al di fuori di tale contesto, si passi esplicitamente un DestroyRef.

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

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

Il pattern takeUntil (classico)

Prima di takeUntilDestroyed, il pattern standard utilizzava un Subject che emetteva in ngOnDestroy.

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

I flussi che si completano non richiedono pulizia

Le richieste HttpClient emettono una volta e poi si completano, quindi liberano autonomamente le risorse. In genere non è necessario annullare la sottoscrizione a una singola chiamata HTTP, anche se takeUntilDestroyed è comunque sicuro.

Il pipe async lo gestisce automaticamente

L'approccio migliore per i template è lasciare che il pipe async esegua e annulli automaticamente la sottoscrizione. L'argomento viene approfondito nella lezione successiva.

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

Segnali di una perdita di sottoscrizione

Richieste di rete duplicate, gestori che vengono eseguiti dopo la navigazione, memoria in aumento negli strumenti per sviluppatori o errori come "Cannot read property of destroyed view" indicano spesso sottoscrizioni non annullate.

Anche toSignal esegue la pulizia automatica

La conversione di un observable in un signal con toSignal() annulla automaticamente la sottoscrizione quando il contesto proprietario viene distrutto.

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

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

Scegliere l'approccio

Nei template, preferisca il pipe async o toSignal; utilizzi takeUntilDestroyed() per le sottoscrizioni manuali; ricorra a una raccolta di Subscription solo quando necessario.

Verifica rapida

Verifichi la sua comprensione dell'annullamento delle sottoscrizioni.

Riepilogo: annullamento delle sottoscrizioni e perdite di memoria

Interrompa sempre le sottoscrizioni di lunga durata.

takeUntilDestroyed() completa automaticamente il flusso alla distruzione.
Il pipe async e toSignal() gestiscono le sottoscrizioni al posto suo.
Le singole chiamate HTTP si completano autonomamente.

Prossimo argomento: il pipe async in dettaglio.

Domande Frequenti

La lezione «Annullamento delle sottoscrizioni e memory leak» è gratuita?

Sì — il testo completo di «Annullamento delle sottoscrizioni e memory leak» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Annullamento delle sottoscrizioni e memory leak»?

Eviti le perdite di memoria con takeUntilDestroyed. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Annullamento delle sottoscrizioni e memory leak»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Observable e sottoscrizioni
Subject e BehaviorSubject
Annullamento delle sottoscrizioni e memory leak
La pipe async

← Torna a Angular Academy