Знакомство с оператором takeUntilDestroyed в Angular

Apr 06 2023
Angular v16 представляет новую функцию в записи @angular/core/rxjs-interop, которая включает три новых оператора: fromSignal, fromObservable и takeUntilDestroyed. Эти операторы предназначены для расширения функциональности RxJS в приложениях Angular.

Angular v16 представляет новую функцию в @angular/core/rxjs-interopзаписи, которая включает три новых оператора: fromSignal, fromObservableи takeUntilDestroyed. Эти операторы предназначены для расширения функциональности RxJS в приложениях Angular.

Оператор takeUntilDestroyedпозволяет разработчикам автоматически завершать наблюдаемое, когда вызывающий контекст (который может быть компонентом, директивой, службой или каналом) уничтожается. Это помогает предотвратить утечку памяти и обеспечивает правильное освобождение ресурсов.

Чтобы использовать takeUntilDestroyedоператор, сначала необходимо импортировать его из @angular/core/rxjs-interopзаписи.

После импорта вы можете использовать его, привязав к наблюдаемому объекту. Например:

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  ...
})
export default class HomeComponent {

  constructor() {
    interval(1000).pipe(takeUntilDestroyed()).subscribe(console.log);
  }
}

Если вы хотите использовать оператор в других местах, вы можете указать провайдера DestroyRefявно. Вот пример:

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  ...
})
export default class HomeComponent {
  private destroyRef = inject(DestroyRef);

  ngOnInit() {
    interval(1000).pipe(
      takeUntilDestroyed(this.destroyRef)
    ).subscribe(console.log);
  }
}