Angular Academy · Lektion

Observables und Subscriptions

Erstellen Sie Observable-Streams und abonnieren Sie sie.

Observables und Subscriptions ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 Observable

Ein Observable ist ein verzögerter Datenstrom von Werten über die Zeit. Nichts geschieht, bis Sie subscribe aufrufen. Es kann null oder mehr Werte ausgeben und anschließend entweder abgeschlossen werden oder einen Fehler auslösen.

RxJS ist die reaktive Bibliothek, die Angular für die Verarbeitung asynchroner Aufgaben wie HTTP-Anfragen, Ereignisse und Timer bereitstellt.

Ein Observable erstellen

Der Konstruktor von Observable nimmt eine Subscriber-Funktion entgegen. Mit next() geben Sie Werte aus, mit complete() schließen Sie den Datenstrom ab und mit error() lösen Sie einen Fehler aus.

import { Observable } from 'rxjs';

const numbers$ = new Observable<number>(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

Observables sind verzögert

Die Subscriber-Funktion wird erst ausgeführt, wenn subscribe() aufgerufen wird. Jedes Abonnement löst eine neue, unabhängige Ausführung aus (Cold Observable).

const tick$ = new Observable(s => {
  console.log('executing');
  s.next(Date.now());
});
// "executing" is NOT logged until subscribe() runs

Erstellungshilfen: of und from

Den Konstruktor verwenden Sie nur selten. Mit Hilfsfunktionen wie of und from erstellen Sie Observables schnell.

import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(v => console.log(v)); // 10 20 30
from([1, 2, 3]).subscribe(v => console.log(v)); // 1 2 3
from(fetch('/api')).subscribe(res => console.log(res));

Die Ersteller interval und timer

interval gibt nach einem Zeitplan fortlaufend steigende Zahlen aus; timer wartet zunächst und gibt anschließend einen Wert aus.

import { interval, timer } from 'rxjs';

interval(1000).subscribe(n => console.log('tick', n));
// 0, 1, 2, ... every second

timer(2000).subscribe(() => console.log('after 2s'));

HttpClient gibt Observables zurück

In Angular geben die Methoden von HttpClient Observables zurück. Die Anfrage wird erst gesendet, wenn Sie das Observable abonnieren.

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const http = inject(HttpClient);
http.get('/api/users').subscribe(users => console.log(users));

Das Subscription-Objekt

subscribe() gibt ein Subscription-Objekt zurück. Rufen Sie unsubscribe() auf, um den Empfang von Werten zu beenden und Ressourcen freizugeben.

import { interval } from 'rxjs';

const sub = interval(1000).subscribe(n => console.log(n));
// later
sub.unsubscribe(); // stops the stream

Abschluss und Abbestellung im Vergleich

Wenn ein Observable complete() oder error() ausführt, räumt es automatisch auf. Bei unendlichen Datenströmen (interval, DOM-Ereignisse) müssen Sie das Abonnement selbst beenden.

Kurzform für Observer

Wenn Sie sich nur für die Werte interessieren, übergeben Sie eine einzelne Funktion – sie wird zum Handler für next.

of(1, 2, 3).subscribe(v => console.log(v));
// equivalent to { next: v => console.log(v) }

Hot und Cold (kurz erklärt)

Cold-Observables beginnen erst beim Abonnieren mit der Ausgabe, und jeder Abonnent erhält eine eigene Ausführung (HTTP, of, interval). Hot-Observables geben unabhängig von Abonnenten Werte aus und teilen diese mit ihnen (als Nächstes lernen Sie Subjects kennen).

Kurzer Test

Testen Sie Ihr Verständnis von Observables.

Zusammenfassung: Observables und Subscriptions

Ein Observable ist ein verzögerter Datenstrom, den Sie mit subscribe() aktivieren.

Geben Sie Werte mit next aus, schließen Sie den Datenstrom mit complete ab und lösen Sie Fehler mit error aus.
Die Methoden von HttpClient geben Observables zurück – die Anfrage wird beim Abonnieren gesendet.
Beenden Sie unendliche Datenströme, um Speicherlecks zu vermeiden.

Als Nächstes: Subjects und BehaviorSubject.

Häufig gestellte Fragen

Ist die Lektion „Observables und Subscriptions“ kostenlos?

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

Erstellen Sie Observable-Streams und abonnieren Sie sie. 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 1 von 4.

Wie lange dauert die Lektion „Observables und Subscriptions“?

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