Subjects i BehaviorSubject
Rozsyłaj wartości za pomocą obiektów subject.
Subjects i BehaviorSubject to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Czym jest Subject
Subject jest jednocześnie Observable i Observer. Można go subskrybować, a także przesyłać do niego wartości za pomocą next(). Subject rozsyła wartości do wielu odbiorców: wszyscy subskrybenci otrzymują te same emisje.
Tworzenie i używanie Subject
Subskrybenci dodani po wyemitowaniu wartości nie otrzymają wcześniejszych wartości.
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 rozsyła wartości do wielu odbiorców
W przeciwieństwie do zimnego Observable, który wykonuje się osobno dla każdego subskrybenta, Subject współdzieli jedno wykonanie. Każdy subskrybent otrzymuje tę samą wartość w tym samym czasie.
BehaviorSubject
BehaviorSubject wymaga wartości początkowej i zapamiętuje najnowszą wartość. Nowi subskrybenci natychmiast otrzymują bieżącą wartość.
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)Odczytywanie bieżącej wartości
BehaviorSubject udostępnia bieżącą wartość synchronicznie za pośrednictwem .value lub .getValue(). Zwykłe Subject nie mają tej funkcji.
const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }Subject jako prosty magazyn stanu
BehaviorSubject jest często używany jako lekki kontener stanu w usługach Angular: przechowuje stan, udostępnia go jako Observable tylko do odczytu i przesyła aktualizacje za pomocą next.
class CounterService {
private count$ = new BehaviorSubject(0);
readonly value$ = this.count$.asObservable();
increment() { this.count$.next(this.count$.value + 1); }
}asObservable do hermetyzacji
Udostępnij .asObservable(), aby odbiorcy mogli subskrybować strumień, ale nie mogli wywołać next() i uszkodzić stanu.
private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()ReplaySubject
ReplaySubject odtwarza konfigurowalną liczbę wcześniejszych wartości dla nowych subskrybentów — jest przydatny do buforowania ostatnich N zdarzeń.
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 a BehaviorSubject
Subject: brak wartości początkowej, późni subskrybenci nie otrzymują wcześniejszych emisji.
BehaviorSubject: ma wartość początkową, późni subskrybenci otrzymują najnowszą wartość. W przypadku stanu interfejsu użytkownika zwykle najlepiej sprawdzi się BehaviorSubject.
Kończenie działania Subject
Wywołaj complete(), aby zakończyć działanie Subject. Po zakończeniu wartości przekazywane przez next() są ignorowane, a subskrybenci zostają zwolnieni. Zawsze kończ działanie Subject w usługach, które są niszczone.
const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignoredSubject łączy podejście imperatywne z reaktywnym
Subject umożliwia przekształcenie zdarzeń imperatywnych (procedury obsługi kliknięcia przycisku lub komunikatu WebSocket) w strumień Observable, na który pozostała część aplikacji może reagować deklaratywnie.
Szybkie sprawdzenie
Sprawdź swoją wiedzę o Subject.
Podsumowanie: Subject i BehaviorSubject
Subject to strumienie rozsyłające wartości do wielu odbiorców, do których można je przesyłać.
Subject: nie zapamiętuje wcześniejszych wartości.BehaviorSubject: przechowuje i odtwarza najnowszą wartość; udostępnia.value.ReplaySubject: odtwarza ostatnich N wartości.- Udostępniaj Subject za pomocą
asObservable(), aby chronić stan.
Następnie: anulowanie subskrypcji i wycieki pamięci.
Często zadawane pytania
Czy lekcja „Subjects i BehaviorSubject” jest bezpłatna?
Tak — pełny tekst „Subjects i BehaviorSubject” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Subjects i BehaviorSubject”?
Rozsyłaj wartości za pomocą obiektów subject. Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Subjects i BehaviorSubject”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Obserwowalne i subskrypcje
- Subjects i BehaviorSubject
- Anulowanie subskrypcji i wycieki pamięci
- Potok async