Conociendo el proveedor DestroyRef en Angular

Angular v16 ha introducido un nuevo proveedor llamado DestroyRef, que permite registrar devoluciones de llamadas de destrucción para un ámbito de ciclo de vida específico. Esta función es aplicable a componentes, directivas, canalizaciones, vistas incrustadas e instancias de EnvironmentInjector.

El uso de DestroyRefes sencillo. Podemos inyectar el DestroyRefproveedor y registrar una destroydevolución de llamada así:

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

Con DestroyRef, es posible crear una lógica reutilizable que realice las tareas de limpieza necesarias cuando se scopedestruye sin necesidad de herencia . Esto simplifica el proceso de implementación y reduce la complejidad.

Por ejemplo, podemos crear un untilDestroyedoperador que se base en 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);
  }
}