Mengenal Penyedia DestroyRef di Angular

Angular v16 telah memperkenalkan penyedia baru bernama DestroyRef, yang memungkinkan untuk mendaftarkan panggilan balik penghancuran untuk lingkup siklus hidup tertentu. Fitur ini berlaku untuk komponen, arahan, pipa, tampilan tersemat, dan contoh EnvironmentInjector.

Penggunaannya DestroyRefsangat mudah. Kami dapat menyuntikkan DestroyRefpenyedia dan mendaftarkan destroypanggilan balik seperti:

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

Menggunakan DestroyRef, dimungkinkan untuk membuat logika yang dapat digunakan kembali yang melakukan tugas pembersihan yang diperlukan saat a scopedihancurkan tanpa memerlukan warisan . Ini menyederhanakan proses implementasi dan mengurangi kompleksitas.

Misalnya, kita dapat membuat untilDestroyedoperator yang mengandalkan 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);
  }
}