Angular Academy · Урок

Связывание сигналов и RxJS

Связывайте сигналы и наблюдаемые объекты с помощью средств совместимости

«Связывание сигналов и RxJS» — бесплатный урок Angular Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Два реактивных мира

Приложения Angular объединяют сигналы (синхронные, с получением данных по запросу) и наблюдаемые потоки RxJS (асинхронные потоки с передачей данных). Пакет @angular/core/rxjs-interop соединяет их с помощью toSignal и toObservable.

Основы toSignal

toSignal() подписывается на наблюдаемый поток и предоставляет его последнее значение как сигнал только для чтения. Подписка автоматически отменяется при уничтожении контекста внедрения.

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

clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}

initialValue и синхронное чтение

Наблюдаемые потоки могут выдавать значения не сразу, поэтому сигналу нужно начальное значение. Укажите initialValue или используйте requireSync: true, если источник гарантированно выдаёт значение немедленно (например, BehaviorSubject).

value = toSignal(this.behaviorSubject$, { requireSync: true });

Замена асинхронного конвейера

toSignal часто заменяет конвейер async. Вместо data$ | async Вы напрямую читаете data(), что удобно объединять с computed().

private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);

Основы toObservable

toObservable() преобразует сигнал в наблюдаемый поток, который выдаёт значение при каждом изменении сигнала. Это полезно, когда нужны операторы RxJS, такие как debounceTime или switchMap.

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

query = signal('');
query$ = toObservable(this.query);

Конвейер поиска с задержкой

Объедините оба направления: сигнал передаётся в toObservable, RxJS добавляет задержку и переключается на HTTP-запрос, а toSignal снова преобразует результаты в сигнал.

query = signal('');
results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => this.api.search(q))
  ), { initialValue: [] }
);

Контекст внедрения

Оба вспомогательных средства требуют контекста внедрения (они управляют подписками, связанными с жизненным циклом). Вызывайте их при инициализации полей или передавайте явный injector, если вызываете их позже.

constructor() {
  this.data = toSignal(this.source$); // ok: in constructor
}

Обработка ошибок

Если в источнике наблюдаемого потока возникает ошибка, toSignal повторно выдаёт её при чтении. Обрабатывайте ошибки внутри конвейера с помощью catchError, чтобы сигнал сохранял пригодное для использования значение.

results = toSignal(
  toObservable(this.query).pipe(
    switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
  ), { initialValue: [] }
);

Время выдачи toObservable

toObservable использует эффект внутри, поэтому значения выдаются в следующей микрозадаче, а не синхронно. Быстрые изменения сигнала объединяются, и сохраняется только последнее значение.

Когда что использовать

Используйте toObservable, когда нужны зависящие от времени операторы или операторы высшего порядка. Используйте toSignal, чтобы применять любой поток в шаблонах и вычисляемых моделях чтения без ручной подписки.

Очистка выполняется автоматически

Оба вспомогательных средства связывают свою подписку с жизненным циклом контекста внедрения. При уничтожении компонента или службы подписка закрывается, что предотвращает утечки без ручного вызова unsubscribe().

Быстрая проверка

Проверьте свои знания о взаимодействии технологий.

Итоги

Вы связали сигналы и RxJS: toSignal использует потоки как сигналы только для чтения (с initialValue/requireSync), а toObservable предоставляет сигналы как потоки для операторов RxJS. Подписки автоматически очищаются через контекст внедрения.

Часто задаваемые вопросы

Урок «Связывание сигналов и RxJS» бесплатный?

Да — полный текст урока «Связывание сигналов и RxJS» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Связывание сигналов и RxJS»?

Связывайте сигналы и наблюдаемые объекты с помощью средств совместимости Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Связывание сигналов и RxJS»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Angular Academy