Lernen Sie den DestroyRef-Anbieter in Angular kennen

Angular v16 hat einen neuen Anbieter namens eingeführt DestroyRef, der die Registrierung von Zerstörungsrückrufen für einen bestimmten Lebenszyklusbereich ermöglicht. Diese Funktion gilt für Komponenten, Anweisungen, Pipes, eingebettete Ansichten und Instanzen von EnvironmentInjector.

Die Verwendung von DestroyRefist unkompliziert. Wir können den DestroyRefAnbieter einfügen und einen destroyRückruf wie folgt registrieren:

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

Mit DestroyRefist es möglich, wiederverwendbare Logik zu erstellen, die notwendige Bereinigungsaufgaben ausführt, wenn a zerstört wird, ohne dass eine Vererbungscope erforderlich ist . Dies vereinfacht den Implementierungsprozess und reduziert die Komplexität.

Beispielsweise können wir einen untilDestroyedOperator erstellen, der auf Folgendem basiert 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);
  }
}