Angular Academy · Aula

ngOnDestroy e limpeza

Libere recursos quando um componente for removido.

ngOnDestroy e limpeza é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que a limpeza é importante

Quando um componente é removido do DOM, inscrições, temporizadores ou ouvintes de eventos que permanecem ativos podem causar vazamentos de memória. O gancho OnDestroy é o local onde você faz essa limpeza.

Implementando OnDestroy

Implemente OnDestroy e adicione um método ngOnDestroy. O Angular o chama imediatamente antes de o componente ser destruído.

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

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

Cancelando inscrições em Observables

As inscrições manuais devem ser canceladas para evitar vazamentos. Armazene a Subscription e chame unsubscribe em ngOnDestroy.

private sub!: Subscription;

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

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

Gerenciando várias inscrições

Você pode reunir as inscrições em uma única Subscription principal e cancelar todas de uma só vez.

private subs = new Subscription();

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

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

O padrão takeUntil

Um padrão popular do RxJS usa um Subject de destruição com takeUntil para que os fluxos sejam concluídos automaticamente quando o componente for destruído.

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

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

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

Usando takeUntilDestroyed

O Angular moderno oferece takeUntilDestroyed de @angular/core/rxjs-interop, que vincula um fluxo ao ciclo de vida do componente sem exigir limpeza manual.

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

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

A alternativa do pipe async

Usar o pipe async no template elimina completamente a necessidade de inscrições manuais, pois ele cancela a inscrição automaticamente durante a destruição.

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

Limpando temporizadores e intervalos

Os temporizadores nativos não são gerenciados pelo Angular. Limpe-os em ngOnDestroy para impedir que os retornos de chamada sejam executados depois da destruição.

private id!: number;

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

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

Removendo ouvintes de eventos

Se você adicionar ouvintes do DOM manualmente, remova-os durante a destruição para evitar vazamentos e manipuladores obsoletos.

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

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

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

DestroyRef para retornos de chamada

Você pode injetar DestroyRef e registrar um retorno de chamada onDestroy, o que é útil em serviços ou contextos que não sejam componentes.

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

O que aciona ngOnDestroy

ngOnDestroy é executado quando um componente é removido pelo roteamento, por uma diretiva estrutural como *ngIf ou quando o componente pai é destruído.

Verificação rápida

Teste sua compreensão de OnDestroy.

Recapitulação

O gancho OnDestroy limpa inscrições, temporizadores e ouvintes. Use unsubscribe, o padrão takeUntil, takeUntilDestroyed, o pipe async ou DestroyRef para evitar vazamentos de memória.

Perguntas Frequentes

A aula “ngOnDestroy e limpeza” é grátis?

Sim — o texto completo de “ngOnDestroy e limpeza” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “ngOnDestroy e limpeza”?

Libere recursos quando um componente for removido. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Angular Academy?

Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “ngOnDestroy e limpeza”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Angular Academy?

Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Angular Academy