Angular Academy · Leçon

Subjects et BehaviorSubject

Diffusez des valeurs à plusieurs abonnés avec des subjects.

Subjects et BehaviorSubject est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.

Qu’est-ce qu’un sujet

Un Subject est à la fois un observable et un observateur. Vous pouvez vous y abonner et lui transmettre des valeurs avec next(). Il diffuse ses valeurs à plusieurs abonnés : tous reçoivent les mêmes émissions.

Créer et utiliser un sujet

Les abonnés ajoutés après l’émission d’une valeur ne reçoivent pas les valeurs passées.

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: world

Les sujets diffusent leurs valeurs

Contrairement à un observable froid qui s’exécute séparément pour chaque abonné, un sujet partage une seule exécution. Chaque abonné reçoit la même valeur au même moment.

BehaviorSubject

Un BehaviorSubject nécessite une valeur initiale et mémorise la valeur la plus récente. Les nouveaux abonnés reçoivent immédiatement la valeur actuelle.

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)

Lire la valeur actuelle

BehaviorSubject expose sa valeur actuelle de manière synchrone via .value ou .getValue(). Les sujets classiques ne proposent pas cette possibilité.

const state$ = new BehaviorSubject({ loggedIn: false });
console.log(state$.value); // { loggedIn: false }
state$.next({ loggedIn: true });
console.log(state$.getValue()); // { loggedIn: true }

Le sujet comme magasin simple

BehaviorSubject est un conteneur d’état léger couramment utilisé dans les services Angular : il conserve l’état, l’expose comme observable en lecture seule et transmet les mises à jour avec next.

class CounterService {
  private count$ = new BehaviorSubject(0);
  readonly value$ = this.count$.asObservable();
  increment() { this.count$.next(this.count$.value + 1); }
}

asObservable pour l’encapsulation

Exposez .asObservable() afin que les consommateurs puissent s’abonner, sans pouvoir appeler next() et corrompre votre état.

private data$ = new Subject<number>();
readonly stream$ = this.data$.asObservable();
// consumers: stream$.subscribe(...) but no stream$.next()

ReplaySubject

ReplaySubject rejoue aux nouveaux abonnés un nombre configurable de valeurs passées ; c’est utile pour mettre en cache les N derniers événements.

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, 3

Subject ou BehaviorSubject

Subject : aucune valeur initiale, les abonnés tardifs manquent les émissions passées.
BehaviorSubject : possède une valeur initiale, les abonnés tardifs reçoivent la plus récente. Pour l’état de l’interface utilisateur, BehaviorSubject est généralement le choix adapté.

Terminer un sujet

Appelez complete() pour terminer le sujet. Après sa terminaison, les valeurs transmises avec next() sont ignorées et les abonnés sont libérés. Terminez toujours les sujets dans les services qui sont détruits.

const s$ = new Subject<number>();
s$.subscribe(v => console.log(v));
s$.next(1);
s$.complete();
s$.next(2); // ignored

Les sujets relient l’impératif et le réactif

Les sujets vous permettent de transformer des événements impératifs (le gestionnaire d’un clic sur un bouton, un message WebSocket) en flux observable auquel le reste de votre application peut réagir de manière déclarative.

Vérification rapide

Vérifiez votre compréhension des sujets.

Récapitulatif : sujets et BehaviorSubject

Les sujets sont des flux diffusés à plusieurs abonnés dans lesquels vous pouvez envoyer des valeurs.

Subject : aucune mémoire des valeurs passées.
BehaviorSubject : conserve et rejoue la valeur la plus récente ; possède .value.
ReplaySubject : rejoue les N dernières valeurs.
Exposez-le avec asObservable() pour protéger l’état.

Ensuite : le désabonnement et les fuites mémoire.

Questions Fréquemment Posées

La leçon « Subjects et BehaviorSubject » est-elle gratuite ?

Oui — le texte complet de « Subjects et BehaviorSubject » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Subjects et BehaviorSubject » ?

Diffusez des valeurs à plusieurs abonnés avec des subjects. Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Angular Academy ?

Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Subjects et BehaviorSubject » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?

Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Angular Academy