Angular'da DestroyRef Sağlayıcısını Tanıma

Angular v16 , belirli bir yaşam döngüsü kapsamı için yok etme geri aramalarının kaydedilmesine izin veren adlı yeni bir sağlayıcı tanıttı DestroyRef. Bu özellik, bileşenler, yönergeler, kanallar, katıştırılmış görünümler ve EnvironmentInjector.

kullanımı DestroyRefbasittir. Sağlayıcıyı enjekte edebilir DestroyRefve destroyşöyle bir geri arama kaydedebiliriz:

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

kullanarak , kalıtım ihtiyacı olmadan DestroyRefa yok edildiğinde gerekli temizleme görevlerini gerçekleştiren yeniden kullanılabilir bir mantık oluşturmak mümkündür . Bu, uygulama sürecini basitleştirir ve karmaşıklığı azaltır.scope

untilDestroyedÖrneğin, şunlara dayanan bir operatör oluşturabiliriz 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);
  }
}