Знакомство с провайдером DestroyRef в Angular

Angular v16 представил новый провайдер под названием DestroyRef, который позволяет регистрировать обратные вызовы уничтожения для определенной области жизненного цикла. Эта функция применима к компонентам, директивам, конвейерам, встроенным представлениям и экземплярам EnvironmentInjector.

Использование DestroyRefпросто. Мы можем внедрить DestroyRefпровайдера и зарегистрировать destroyобратный вызов следующим образом:

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

Используя DestroyRef, можно создать повторно используемую логику, которая выполняет необходимые задачи очистки, когда a scopeуничтожается без необходимости наследования . Это упрощает процесс внедрения и снижает сложность.

Например, мы можем создать untilDestroyedоператор, который зависит от 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);
  }
}