Angular Academy · Lektion

Kombinationsoperatoren

Kombinieren Sie Streams mit combineLatest und forkJoin.

Kombinationsoperatoren ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 3 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.

Warum Streams kombiniert werden

Reale Anwendungen koordinieren mehrere asynchrone Quellen: mehrere HTTP-Aufrufe, einen Formularwert zusammen mit einem Filter oder einen Klick zusammen mit dem aktuellen Zustand. Kombinationsoperatoren führen mehrere Observables zu einem zusammen.

combineLatest

combineLatest gibt bei jeder Ausgabe von einer beliebigen Quelle ein Array mit dem jeweils neuesten Wert aller Quellen aus – nachdem alle mindestens einmal einen Wert ausgegeben haben.

import { combineLatest } from 'rxjs';

combineLatest([name$, age$]).subscribe(
  ([name, age]) => console.log(name, age)
);
// re-emits whenever name$ OR age$ changes

Anwendungsfall für combineLatest

Ideal für abgeleiteten UI-Zustand: Kombinieren Sie einen Suchbegriff und einen Kategoriefilter, um eine Abfrage zu erzeugen.

combineLatest([term$, category$]).pipe(
  switchMap(([term, cat]) =>
    this.http.get('/api?q=' + term + '&cat=' + cat))
).subscribe(results => console.log(results));

forkJoin

forkJoin wartet, bis alle Quellen abgeschlossen sind, und gibt dann ein Array mit ihren jeweils letzten Werten aus. In RxJS entspricht das Promise.all.

import { forkJoin } from 'rxjs';

forkJoin({
  user: this.http.get('/api/user'),
  posts: this.http.get('/api/posts')
}).subscribe(({ user, posts }) => {
  console.log(user, posts);
});

Einschränkung von forkJoin

forkJoin gibt nichts aus, wenn eine Quelle niemals abgeschlossen wird (etwa ein Intervall) oder vor dem Abschluss einen Fehler ausgibt. Verwenden Sie es für endliche Quellen wie HTTP-Anfragen.

merge

merge führt mehrere Observables zu einem zusammen und gibt Werte aus, sobald sie von einer beliebigen Quelle eintreffen, ohne sie einander zuzuordnen.

import { merge } from 'rxjs';

merge(clicks$, keypresses$).subscribe(
  event => console.log('event', event)
);
// emits whenever either source emits

zip

zip ordnet Werte anhand ihres Index einander zu: Zuerst gibt es den jeweils ersten Wert aus, dann den jeweils zweiten und so weiter. Es wartet, bis alle Quellen den nächsten Wert geliefert haben.

import { zip, of } from 'rxjs';

zip(of(1, 2, 3), of('a', 'b', 'c'))
  .subscribe(([n, l]) => console.log(n, l));
// [1,a], [2,b], [3,c]

startWith

startWith stellt einen Anfangswert voran. Das ist nützlich, damit combineLatest bereits Werte ausgeben kann, bevor jede Quelle etwas ausgegeben hat.

import { startWith } from 'rxjs';

combineLatest([
  term$.pipe(startWith('')),
  category$.pipe(startWith('all'))
]).subscribe(([t, c]) => console.log(t, c));

withLatestFrom

withLatestFrom gibt nur dann etwas aus, wenn die Quelle einen Wert ausgibt, und fügt die neuesten Werte der anderen Observables hinzu. Die Quelle gibt den Takt vor, die anderen bleiben passiv.

import { withLatestFrom } from 'rxjs';

saveClick$.pipe(
  withLatestFrom(formValue$)
).subscribe(([_, form]) => this.save(form));

concat für sequenzielle Streams

concat abonniert jede Quelle der Reihe nach und wechselt erst zur nächsten, wenn die aktuelle abgeschlossen ist. Verwenden Sie es, wenn Streams strikt nacheinander ausgeführt werden müssen.

import { concat, of } from 'rxjs';

concat(of(1, 2), of(3, 4))
  .subscribe(v => console.log(v));
// 1, 2, 3, 4 (second starts after first completes)

combineLatest im Vergleich zu forkJoin und zip

combineLatest: jeweils der neueste Wert bei jeder Ausgabe.
forkJoin: jeweils der letzte Wert, sobald alle abgeschlossen sind.
zip: anhand des Index gepaarte Werte.
Wählen Sie den Operator danach aus, ob Sie laufende Aktualisierungen, eine einmalige Zusammenführung oder eine strikt indexbasierte Zuordnung benötigen.

Schnelltest

Testen Sie Ihr Verständnis von Kombinationsoperatoren.

Rückblick: Kombinationsoperatoren

Kombinationsoperatoren koordinieren mehrere Streams.

combineLatest: jeweils der neueste Wert bei jeder Ausgabe.
forkJoin: Zusammenführung beim Abschluss (ähnlich wie Promise.all).
merge: alle Ausgaben ineinander verschachteln.
withLatestFrom: von der Quelle gesteuerter Schnappschuss der anderen Werte.

Als Nächstes: Operatoren zur Fehlerbehandlung.

Häufig gestellte Fragen

Ist die Lektion „Kombinationsoperatoren“ kostenlos?

Ja — der vollständige Text von „Kombinationsoperatoren“ 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 „Kombinationsoperatoren“?

Kombinieren Sie Streams mit combineLatest und forkJoin. 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 3 von 4.

Wie lange dauert die Lektion „Kombinationsoperatoren“?

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