Субъекты и BehaviorSubject
Рассылайте значения нескольким подписчикам с помощью субъектов.
«Субъекты и BehaviorSubject» — бесплатный урок Angular Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.
Что такое Subject
Subject — это одновременно Observable и Observer. На него можно подписаться, а также передавать в него значения с помощью next(). Он работает как широковещательный поток: все подписчики получают одинаковые значения.
Создание и использование Subject
Подписчики, добавленные после выдачи значения, не получат значения из прошлого.
import { Subject } from 'rxjs';
const events$ = new Subject<string>();
events$.subscribe(v => console.log('A:', v));
events$.next('hello'); // A: hello
events$.subscribe(v => console.log('B:', v));
events$.next('world'); // A: world, B: worldSubject передаёт значения всем подписчикам
В отличие от холодного observable, который выполняется отдельно для каждого подписчика, Subject использует одно общее выполнение. Каждый подписчик получает одно и то же значение в одно и то же время.
BehaviorSubject
BehaviorSubject требует начального значения и запоминает последнее значение. Новые подписчики сразу получают текущее значение.
import { BehaviorSubject } from 'rxjs';
const count$ = new BehaviorSubject<number>(0);
count$.subscribe(v => console.log('A:', v)); // A: 0
count$.next(5);
count$.subscribe(v => console.log('B:', v)); // B: 5 (gets latest)Чтение текущего значения
BehaviorSubject синхронно предоставляет текущее значение через .value или .getValue(). У обычного Subject такой возможности нет.
const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }Subject как простое хранилище
BehaviorSubject часто используется как лёгкий контейнер состояния в сервисах Angular: храните состояние, предоставляйте его как observable только для чтения и передавайте обновления с помощью next.
class CounterService {
private count$ = new BehaviorSubject(0);
readonly value$ = this.count$.asObservable();
increment() { this.count$.next(this.count$.value + 1); }
}asObservable для инкапсуляции
Предоставляйте .asObservable(), чтобы потребители могли подписываться, но не могли вызывать next() и нарушать целостность состояния.
private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()ReplaySubject
ReplaySubject повторно выдаёт новым подписчикам настраиваемое количество прошлых значений — это удобно для кэширования последних N событий.
import { ReplaySubject } from 'rxjs';
const recent$ = new ReplaySubject<number>(2); // buffer last 2
recent$.next(1); recent$.next(2); recent$.next(3);
recent$.subscribe(v => console.log(v)); // 2, 3Subject и BehaviorSubject
Subject: нет начального значения, подписчики, подключившиеся позднее, не получают прошлые значения.
BehaviorSubject: есть начальное значение, поздние подписчики получают последнее значение. Для состояния интерфейса обычно нужен именно BehaviorSubject.
Завершение Subject
Вызовите complete(), чтобы завершить Subject. После завершения значения, переданные через next(), игнорируются, а подписчики освобождаются. Всегда завершайте Subject в сервисах, которые уничтожаются.
const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignoredSubject связывает императивный и реактивный подходы
Subject позволяет преобразовать императивные события (обработчик нажатия кнопки или сообщение WebSocket) в поток observable, на который остальная часть приложения может реагировать декларативно.
Быстрая проверка
Проверьте, насколько хорошо Вы поняли работу Subject.
Повторение: Subject и BehaviorSubject
Subject — это широковещательные потоки, в которые можно передавать значения.
Subject: не хранит прошлые значения.BehaviorSubject: хранит и повторно выдаёт последнее значение; имеет свойство.value.ReplaySubject: повторно выдаёт последние N значений.- Предоставляйте поток через
asObservable(), чтобы защитить состояние.
Далее: отписка и утечки памяти.
Часто задаваемые вопросы
Урок «Субъекты и BehaviorSubject» бесплатный?
Да — полный текст урока «Субъекты и BehaviorSubject» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.
Чему я научусь в уроке «Субъекты и BehaviorSubject»?
Рассылайте значения нескольким подписчикам с помощью субъектов. Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Angular Academy?
Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Субъекты и BehaviorSubject»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Angular Academy?
Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Наблюдаемые последовательности и подписки
- Субъекты и BehaviorSubject
- Отмена подписок и утечки памяти
- Асинхронный конвейер