Apprendre à connaître le fournisseur DestroyRef dans Angular

Angular v16 a introduit un nouveau fournisseur appelé DestroyRef, qui permet d'enregistrer des rappels de destruction pour une portée de cycle de vie spécifique. Cette fonctionnalité s'applique aux composants, directives, canaux, vues intégrées et instances de EnvironmentInjector.

L'utilisation de DestroyRefest simple. Nous pouvons injecter le DestroyReffournisseur et enregistrer un destroyrappel comme suit :

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

En utilisant DestroyRef, il est possible de créer une logique réutilisable qui effectue les tâches de nettoyage nécessaires lorsqu'un scopeest détruit sans avoir besoin d' héritage . Cela simplifie le processus de mise en œuvre et réduit la complexité.

Par exemple, on peut créer un untilDestroyedopérateur qui s'appuie sur 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);
  }
}