BACK
Use casestoSignal — Observable в Signal
Use cases · 36

toSignal — Observable в Signal

Паттерн

Современный Angular поощряет signals — синхронные значения для template и computed. Но данные часто приходят из RxJS-сервиса (HTTP, valueChanges). toSignal(observable$) — мост: подписывается на Observable и хранит последнее значение синхронно.

Какую проблему решаем

Без моста — придётся вручную subscribe в компоненте, хранить значение в поле, чистить подписку при destroy, и отдельно обрабатывать initial-loading state когда поле ещё undefined.

Операторы и зачем они нужны

  • toSignal — подписывается СРАЗУ при создании. Хранит последнее значение, доступное синхронно через signal().
  • initialValue — что вернётся ДО первого next. Критически важно для loading-состояний.
  • В примере мы симулируем поведение функцией toSignalLike, чтобы понять механику.

Подводные камни

  • Без initialValue синхронное чтение вернёт undefined, если Observable не эмитнул сразу.
  • Вызывайте toSignal ОДИН раз и сохраняйте результат. Повторный вызов в getter или template — это повторная подписка → повторный HTTP-запрос.
  • Для long-lived streams (WebSocket, interval) signal держит подписку пока жив injection context. Учитывайте, иначе будет утечка.

Что в итоге получаем

Async-данные становятся синхронно читаемым state с понятным initial/loading поведением. RxJS-сервис + signal-компонент дружат без boilerplate.

script.ts // TypeScript
CONSOLE · Console Output
Нажмите на запуск, чтобы увидеть результат...