Angular Academy · Aula

Cancelamento de inscrições e vazamentos de memória

Evite vazamentos com takeUntilDestroyed.

Cancelamento de inscrições e vazamentos de memória é 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.

O problema dos vazamentos de memória

Se você se inscrever em um observável de longa duração dentro de um componente e nunca cancelar a inscrição, o retorno de chamada continuará sendo executado depois que o componente for destruído. Isso causa vazamento de memória e pode gerar erros ou trabalho duplicado.

Cancelamento manual da inscrição

A solução básica é armazenar a Subscription e cancelar a inscrição em 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(); }
}

Gerenciando várias inscrições

Uma única Subscription pode reunir inscrições filhas com .add(); depois, um único unsubscribe() encerra todas elas.

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

takeUntilDestroyed

O Angular fornece takeUntilDestroyed(), que conclui automaticamente o fluxo quando o componente é destruído — sem precisar de ngOnDestroy manual.

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

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

Requisito de contexto de injeção

Quando chamado sem argumentos, takeUntilDestroyed() precisa ser executado em um contexto de injeção, como o construtor. Fora dele, passe um DestroyRef explicitamente.

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

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

O padrão takeUntil (clássico)

Antes de takeUntilDestroyed, o padrão comum usava um Subject que emitia em ngOnDestroy.

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

Fluxos que são concluídos não precisam de limpeza

As solicitações de HttpClient emitem uma vez e depois são concluídas, portanto limpam seus próprios recursos. Em geral, você não precisa cancelar a inscrição de uma única chamada HTTP — embora takeUntilDestroyed continue sendo seguro.

O pipe async faz isso por você

A melhor abordagem para os modelos é deixar o pipe async fazer a inscrição e cancelá-la automaticamente. Abordaremos isso na próxima lição.

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

Sinais de vazamento de uma inscrição

Solicitações de rede duplicadas, manipuladores sendo executados depois da navegação, memória crescente nas ferramentas de desenvolvimento ou erros como "Cannot read property of destroyed view" geralmente indicam inscrições que foram esquecidas.

toSignal também faz a limpeza automática

Converter um observável em um sinal com toSignal() também cancela a inscrição automaticamente quando o contexto proprietário é destruído.

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

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

Escolhendo uma abordagem

Prefira o pipe async ou toSignal nos modelos; use takeUntilDestroyed() para inscrições manuais; recorra a uma coleção de Subscription somente quando necessário.

Verificação rápida

Teste sua compreensão sobre o cancelamento de inscrições.

Recapitulação: cancelamento de inscrições e vazamentos de memória

Sempre encerre inscrições de longa duração.

takeUntilDestroyed() conclui automaticamente o fluxo durante a destruição.
O pipe async e toSignal() gerenciam as inscrições por você.
Chamadas HTTP únicas são concluídas automaticamente.

A seguir: o pipe async em detalhes.

Perguntas Frequentes

A aula “Cancelamento de inscrições e vazamentos de memória” é grátis?

Sim — o texto completo de “Cancelamento de inscrições e vazamentos de memória” é 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 “Cancelamento de inscrições e vazamentos de memória”?

Evite vazamentos com takeUntilDestroyed. 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 “Cancelamento de inscrições e vazamentos de memória”?

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

Observáveis e inscrições
Subjects e BehaviorSubject
Cancelamento de inscrições e vazamentos de memória
O pipe async

← Voltar para Angular Academy