Angular Academy · Lección

ngOnDestroy y limpieza

Libere recursos cuando se elimine un componente.

ngOnDestroy y limpieza es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.

Por qué es importante la limpieza

Cuando se elimina un componente del DOM, las suscripciones, los temporizadores o los detectores de eventos que permanezcan activos pueden provocar fugas de memoria. El hook OnDestroy es el lugar donde debe limpiarlos.

Implementar OnDestroy

Implemente OnDestroy y añada un método ngOnDestroy. Angular lo llama justo antes de destruir el componente.

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

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

Cancelar la suscripción a Observables

Debe cancelar las suscripciones manuales para evitar fugas. Guarde la Subscription y llame a unsubscribe en ngOnDestroy.

private sub!: Subscription;

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

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

Gestionar varias suscripciones

Puede reunir las suscripciones en una única Subscription principal y cancelar todas a la vez.

private subs = new Subscription();

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

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

El patrón takeUntil

Un patrón popular de RxJS utiliza un Subject de destrucción con takeUntil para que los streams se completen automáticamente cuando muere el componente.

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

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

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

Usar takeUntilDestroyed

Las versiones modernas de Angular ofrecen takeUntilDestroyed desde @angular/core/rxjs-interop, que vincula un stream al ciclo de vida del componente sin necesidad de una limpieza manual.

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

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

La alternativa del pipe async

Utilizar el pipe async en la plantilla evita por completo las suscripciones manuales, ya que cancela la suscripción automáticamente al destruirse el componente.

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

Borrar temporizadores e intervalos

Angular no gestiona los temporizadores nativos. Bórrelos en ngOnDestroy para evitar que las devoluciones de llamada se ejecuten después de la destrucción.

private id!: number;

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

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

Eliminar detectores de eventos

Si añade manualmente detectores de eventos del DOM, elimínelos al destruir el componente para evitar fugas y controladores obsoletos.

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

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

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

DestroyRef para callbacks

Puede inyectar DestroyRef y registrar un callback onDestroy, algo útil en servicios o contextos que no sean componentes.

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

Qué activa ngOnDestroy

ngOnDestroy se ejecuta cuando un componente se elimina mediante el enrutamiento, una directiva estructural como *ngIf o cuando se destruye su componente padre.

Comprobación rápida

Compruebe su comprensión de OnDestroy.

Resumen

El hook OnDestroy limpia suscripciones, temporizadores y listeners. Use unsubscribe, el patrón takeUntil, takeUntilDestroyed, el pipe async o DestroyRef para evitar fugas de memoria.

Preguntas frecuentes

¿La lección «ngOnDestroy y limpieza» es gratis?

Sí — el texto completo de «ngOnDestroy y limpieza» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.

¿Qué aprenderé en «ngOnDestroy y limpieza»?

Libere recursos cuando se elimine un componente. Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Angular Academy?

No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.

¿Cuánto tiempo toma la lección «ngOnDestroy y limpieza»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Angular Academy?

Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a Angular Academy