Subject e BehaviorSubject
Diffonda i valori tramite i subject.
Subject e BehaviorSubject è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Che cos'è un Subject
Un Subject è sia un Observable sia un Observer. È possibile sottoscriversi e inviargli valori con next(). È multicast: tutti i subscriber ricevono le stesse emissioni.
Creare e utilizzare un Subject
I subscriber aggiunti dopo l'emissione di un valore non riceveranno i valori passati.
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: worldI Subject sono multicast
A differenza di un observable cold, che viene eseguito separatamente per ogni subscriber, un Subject condivide una singola esecuzione. Ogni subscriber riceve lo stesso valore nello stesso momento.
BehaviorSubject
Un BehaviorSubject richiede un valore iniziale e conserva in memoria il valore più recente. I nuovi subscriber ricevono immediatamente il valore corrente.
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)Leggere il valore corrente
BehaviorSubject espone il proprio valore corrente in modo sincrono tramite .value o .getValue(). I Subject semplici non offrono questa possibilità.
const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }Subject come store semplice
BehaviorSubject è un contenitore di stato leggero e comune nei servizi Angular: conserva lo stato, lo espone come observable di sola lettura e invia gli aggiornamenti con next.
class CounterService {
private count$ = new BehaviorSubject(0);
readonly value$ = this.count$.asObservable();
increment() { this.count$.next(this.count$.value + 1); }
}asObservable per l'incapsulamento
Si esponga .asObservable() in modo che i consumer possano sottoscriversi, ma non chiamare next() e alterare lo stato.
private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()ReplaySubject
ReplaySubject riproduce ai nuovi subscriber un numero configurabile di valori passati: è utile per memorizzare nella cache gli ultimi N eventi.
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 e BehaviorSubject
Subject: nessun valore iniziale, i subscriber tardivi perdono le emissioni passate.
BehaviorSubject: ha un valore iniziale, i subscriber tardivi ricevono quello più recente. Per lo stato dell'interfaccia, di solito si desidera BehaviorSubject.
Completare un Subject
Si chiami complete() per terminare il Subject. Dopo il completamento, i valori inviati con next() vengono ignorati e i subscriber vengono rilasciati. Si completino sempre i Subject nei servizi che vengono distrutti.
const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignoredI Subject collegano imperativo e reattivo
I Subject consentono di trasformare eventi imperativi (un gestore del clic di un pulsante o un messaggio WebSocket) in un flusso observable a cui il resto dell'applicazione può reagire in modo dichiarativo.
Verifica rapida
Verifichi la sua comprensione dei Subject.
Riepilogo: Subject e BehaviorSubject
I Subject sono flussi multicast a cui è possibile inviare valori.
Subject: non conserva i valori passati.BehaviorSubject: conserva e riproduce il valore più recente; dispone di.value.ReplaySubject: riproduce gli ultimi N valori.- Si esponga con
asObservable()per proteggere lo stato.
Prossimo argomento: annullamento delle sottoscrizioni e perdite di memoria.
Domande Frequenti
La lezione «Subject e BehaviorSubject» è gratuita?
Sì — il testo completo di «Subject e BehaviorSubject» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Subject e BehaviorSubject»?
Diffonda i valori tramite i subject. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Subject e BehaviorSubject»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Observable e sottoscrizioni
- Subject e BehaviorSubject
- Annullamento delle sottoscrizioni e memory leak
- La pipe async