Преобразование сигналов в наблюдаемые в Angular: что вам нужно знать

Angular v16 представляет новый пакет rxjs-interop, который поставляется с удобной функцией toObservable, которая позволяет разработчикам преобразовывать signalфайлы observable. В этой статье мы рассмотрим эту новую функцию и способы ее использования.

Во-первых, нам нужно импортировать toObservableфункцию из @angular/core/rxjs-interopмодуля. Вот пример фрагмента кода, демонстрирующий его использование:

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

@Component({
  standalone: true,
  template: `
    <input (input)="value.set(input.value)" #input />
  `,
})
export class FooComponent {
  value = signal('');
  value$ = toObservable(this.value);

  ngOnInit() {
    this.value$.subscribe(console.log);
  }
}

Под капотом toObservableфункция создает ReplaySubjectфайл . Когда значение изменится, будет выдано новое значение.signaleffectsignaleffect

Одним из преимуществ использования сигналов является то, что нам не нужно добавлять оператор distinctUntilChanged, так как работа уже сделана на signalуровне. Кроме того, если signalвыдается ошибка, она будет передана подписчику как уведомление об ошибке.

Один интересный эффект использования эффекта () для передачи значений заключается в том, что значение будет доставлено асинхронно . Это означает, что даже если мы выдадим несколько значений в один и тот же «тик», мы получим только последнее значение сигнала.

Важно отметить, что когда toObservableфункция вызывается, она проверяет , вызывается ли она в контексте внедрения . Если нет, будет выброшена ошибка. Это означает, что мы можем использовать toObservableфункцию только тогда, когда inject()функция доступна, за исключением случаев, когда мы передаем injectorявно.

@Component({
  standalone: true,
  template: `
    <input (input)="value.set(input.value)" #input />
  `,
})
export class FooComponent {
  value = signal('');
  private injector = inject(Injector);
 
  ngOnInit() {
    const value$ = toObservable(this.value, {
      injector: this.injector
    }).subscribe(console.log);
  }
}

Подпишитесь на меня в Medium или Twitter , чтобы узнать больше об Angular и JS!