Conoscere il provider DestroyRef in Angular

Angular v16 ha introdotto un nuovo provider chiamato DestroyRef, che consente di registrare le richiamate di distruzione per uno specifico ambito del ciclo di vita. Questa funzionalità è applicabile a componenti, direttive, pipe, viste incorporate e istanze di EnvironmentInjector.

L'uso di DestroyRefè semplice. Possiamo iniettare il DestroyRefprovider e registrare una destroyrichiamata in questo modo:

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

Utilizzando DestroyRef, è possibile creare una logica riutilizzabile che esegue le attività di pulizia necessarie quando a scopeviene distrutto senza la necessità di ereditarietà . Ciò semplifica il processo di implementazione e riduce la complessità.

Ad esempio, possiamo creare un untilDestroyedoperatore che si basa su 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);
  }
}