Conhecendo o operador takeUntilDestroyed em Angular

Angular v16 apresenta um novo recurso na @angular/core/rxjs-interopentrada que inclui três novos operadores: fromSignal, fromObservablee takeUntilDestroyed. Esses operadores são projetados para aprimorar a funcionalidade do RxJS em aplicativos Angular.

O takeUntilDestroyedoperador permite que os desenvolvedores concluam automaticamente um observável quando o contexto de chamada (que pode ser um componente, diretiva, serviço ou canal) é destruído. Isso ajuda a evitar vazamentos de memória e garante que os recursos sejam liberados corretamente.

Para usar o takeUntilDestroyedoperador, primeiro você precisa importá-lo da @angular/core/rxjs-interopentrada.

Uma vez importado, você pode usá-lo encadeando-o em seu observable. Por exemplo:

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

@Component({
  ...
})
export default class HomeComponent {

  constructor() {
    interval(1000).pipe(takeUntilDestroyed()).subscribe(console.log);
  }
}

Se você quiser usar a operadora em outros locais, pode passar um DestroyRefprovedor explicitamente. Aqui está um exemplo:

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

@Component({
  ...
})
export default class HomeComponent {
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    interval(1000).pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(console.log);
  }
}