Conhecendo o provedor DestroyRef em Angular

Angular v16 introduziu um novo provedor chamado DestroyRef, que permite registrar callbacks de destruição para um escopo de ciclo de vida específico. Esse recurso é aplicável a componentes, diretivas, canais, exibições incorporadas e instâncias de EnvironmentInjector.

O uso de DestroyRefé direto. Podemos injetar o DestroyRefprovedor e registrar um destroyretorno de chamada da seguinte forma:

@Component({
  selector: 'foo',
  standalone: true,
  template: '',
})
class FooComponent {
  constructor() {
    inject(DestroyRef).onDestroy(() => {
      // do something when the component is destroyed
    })
  }
}

Usando DestroyRef, é possível criar uma lógica reutilizável que executa tarefas de limpeza necessárias quando a scopeé destruído sem a necessidade de herança . Isso simplifica o processo de implementação e reduz a complexidade.

Por exemplo, podemos criar um untilDestroyedoperador que depende de DestroyRef:

export function untilDestroyed() {
  const subject = new Subject();

  inject(DestroyRef).onDestroy(() => {
    subject.next(true);
    subject.complete();
  });

  return <T>() => takeUntil<T>(subject.asObservable());
}
@Directive({
  selector: '[appFoo]',
  standalone: true,
})
export class FooDirective {
  private untilDestroyed = untilDestroyed();

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