Angular Academy · Lezione

ngOnDestroy e pulizia

Rilasci le risorse quando un componente viene rimosso.

ngOnDestroy e pulizia è 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.

Perché la pulizia è importante

Quando un componente viene rimosso dal DOM, eventuali sottoscrizioni, timer o listener di eventi ancora attivi possono causare perdite di memoria. L'hook OnDestroy è il punto in cui eseguire la pulizia.

Implementare OnDestroy

Implementi OnDestroy e aggiunga un metodo ngOnDestroy. Angular lo chiama subito prima che il componente venga distrutto.

import { Component, OnDestroy } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnDestroy {
  ngOnDestroy(): void {
    console.log("cleaning up");
  }
}

Annullare le sottoscrizioni agli Observable

È necessario annullare manualmente le sottoscrizioni per evitare perdite di memoria. Memorizzi il Subscription e chiami unsubscribe in ngOnDestroy.

private sub!: Subscription;

ngOnInit() {
  this.sub = this.timer$.subscribe(t => this.tick = t);
}

ngOnDestroy() {
  this.sub.unsubscribe();
}

Gestire più sottoscrizioni

Può raccogliere le sottoscrizioni in un unico Subscription padre e annullarle tutte insieme.

private subs = new Subscription();

ngOnInit() {
  this.subs.add(this.a$.subscribe());
  this.subs.add(this.b$.subscribe());
}

ngOnDestroy() {
  this.subs.unsubscribe();
}

Il pattern takeUntil

Un pattern RxJS diffuso usa un Subject di distruzione con takeUntil, così gli stream vengono completati automaticamente quando il componente viene distrutto.

private destroy$ = new Subject<void>();

ngOnInit() {
  this.data$.pipe(takeUntil(this.destroy$))
    .subscribe(d => this.data = d);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

Usare takeUntilDestroyed

Angular moderno offre takeUntilDestroyed da @angular/core/rxjs-interop, che collega uno stream al ciclo di vita del componente senza richiedere una pulizia manuale.

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

constructor() {
  this.data$.pipe(takeUntilDestroyed())
    .subscribe(d => this.data = d);
}

L'alternativa della pipe async

Usare la pipe async nel template evita del tutto le sottoscrizioni manuali, perché la sottoscrizione viene annullata automaticamente alla distruzione.

<p>{{ data$ | async }}</p>

Cancellare timer e intervalli

I timer nativi non sono gestiti da Angular. Li cancelli in ngOnDestroy per impedire l'esecuzione di callback dopo la distruzione.

private id!: number;

ngOnInit() {
  this.id = window.setInterval(() => this.tick(), 1000);
}

ngOnDestroy() {
  clearInterval(this.id);
}

Rimuovere i listener di eventi

Se aggiunge manualmente listener al DOM, li rimuova alla distruzione per evitare perdite di memoria e gestori obsoleti.

private onScroll = () => this.handle();

ngOnInit() {
  window.addEventListener("scroll", this.onScroll);
}

ngOnDestroy() {
  window.removeEventListener("scroll", this.onScroll);
}

DestroyRef per le callback

Può iniettare DestroyRef e registrare una callback onDestroy, utile nei servizi o nei contesti che non sono componenti.

constructor(private destroyRef: DestroyRef) {
  const id = setInterval(() => {}, 1000);
  this.destroyRef.onDestroy(() => clearInterval(id));
}

Cosa attiva ngOnDestroy

ngOnDestroy viene eseguito quando un componente viene rimosso dal routing, da una direttiva strutturale come *ngIf oppure quando il componente padre viene distrutto.

Verifica rapida

Verifichi la Sua comprensione di OnDestroy.

Riepilogo

L'hook OnDestroy si occupa di annullare sottoscrizioni, timer e listener. Usi unsubscribe, il pattern takeUntil, takeUntilDestroyed, la pipe async oppure DestroyRef per prevenire le perdite di memoria.

Domande Frequenti

La lezione «ngOnDestroy e pulizia» è gratuita?

Sì — il testo completo di «ngOnDestroy e pulizia» è 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 «ngOnDestroy e pulizia»?

Rilasci le risorse quando un componente viene rimosso. 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 «ngOnDestroy e pulizia»?

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

← Torna a Angular Academy