Zapoznanie się z dostawcą DestroyRef w Angular

Angular v16 wprowadził nowego dostawcę o nazwie DestroyRef, który pozwala rejestrować wywołania zwrotne zniszczenia dla określonego zakresu cyklu życia. Ta funkcja ma zastosowanie do komponentów, dyrektyw, potoków, osadzonych widoków i wystąpień EnvironmentInjector.

Użycie DestroyRefjest proste. Możemy wstrzyknąć DestroyRefdostawcę i zarejestrować destroywywołanie zwrotne w następujący sposób:

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

Używając DestroyRef, możliwe jest utworzenie logiki wielokrotnego użytku, która wykonuje niezbędne zadania czyszczenia po scopezniszczeniu a bez potrzeby dziedziczenia . Upraszcza to proces wdrażania i zmniejsza złożoność.

Na przykład możemy utworzyć untilDestroyedoperator, który polega na 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);
  }
}