Angular Academy · Lektion

Subjects und BehaviorSubject

Multicasten Sie Werte mit Subjects.

Subjects und BehaviorSubject ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Subject

Ein Subject ist gleichzeitig ein Observable und ein Observer. Sie können es abonnieren und mit next() Werte in es hineinschieben. Es verteilt Werte an mehrere Abonnenten: Alle Abonnenten erhalten dieselben Ausgaben.

Ein Subject erstellen und verwenden

Abonnenten, die erst nach der Ausgabe eines Werts hinzugefügt werden, erhalten keine bereits ausgegebenen Werte.

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

Subjects verteilen Werte an mehrere Abonnenten

Im Gegensatz zu einem Cold Observable, das für jeden Abonnenten separat ausgeführt wird, teilt ein Subject eine einzige Ausführung. Jeder Abonnent erhält zur selben Zeit denselben Wert.

BehaviorSubject

Ein BehaviorSubject benötigt einen Anfangswert und speichert den aktuellsten Wert. Neue Abonnenten erhalten sofort den aktuellen Wert.

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)

Den aktuellen Wert lesen

BehaviorSubject stellt seinen aktuellen Wert synchron über .value oder .getValue() bereit. Ein einfaches Subject bietet dies nicht.

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

Subject als einfacher Store

BehaviorSubject ist ein üblicher, leichtgewichtiger Zustandscontainer in Angular-Services: Speichern Sie den Zustand, stellen Sie ihn als schreibgeschütztes Observable bereit und übertragen Sie Aktualisierungen mit next.

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

asObservable für Kapselung

Stellen Sie .asObservable() bereit, damit Verbraucher abonnieren, aber nicht next() aufrufen und dadurch Ihren Zustand beschädigen können.

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

ReplaySubject

ReplaySubject gibt neuen Abonnenten eine konfigurierbare Anzahl vergangener Werte erneut aus – nützlich, um die letzten N Ereignisse zwischenzuspeichern.

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 und BehaviorSubject im Vergleich

Subject: kein Anfangswert, verspätete Abonnenten verpassen vergangene Ausgaben.
BehaviorSubject: besitzt einen Anfangswert, verspätete Abonnenten erhalten den aktuellsten Wert. Für UI-Zustand ist BehaviorSubject normalerweise die richtige Wahl.

Ein Subject abschließen

Rufen Sie complete() auf, um das Subject zu beenden. Nach dem Abschluss werden Werte von next() ignoriert und Abonnenten freigegeben. Schließen Sie Subjects in Services, die zerstört werden, immer ab.

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

Subjects verbinden imperative und reaktive Programmierung

Mit Subjects können Sie imperative Ereignisse (etwa einen Button-Click-Handler oder eine WebSocket-Nachricht) in einen Observable-Datenstrom umwandeln, auf den der Rest Ihrer Anwendung deklarativ reagieren kann.

Kurzer Test

Testen Sie Ihr Verständnis von Subjects.

Zusammenfassung: Subjects und BehaviorSubject

Subjects sind Datenströme, die Werte an mehrere Abonnenten verteilen und in die Sie Werte hineinschieben können.

Subject: speichert keine vergangenen Werte.
BehaviorSubject: speichert und wiederholt den aktuellsten Wert; besitzt .value.
ReplaySubject: wiederholt die letzten N Werte.
Stellen Sie Subjects mit asObservable() bereit, um den Zustand zu schützen.

Als Nächstes: Abbestellungen und Speicherlecks.

Häufig gestellte Fragen

Ist die Lektion „Subjects und BehaviorSubject“ kostenlos?

Ja — der vollständige Text von „Subjects und BehaviorSubject“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Subjects und BehaviorSubject“?

Multicasten Sie Werte mit Subjects. Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Subjects und BehaviorSubject“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy