Observable (из библиотеки RxJS) представляет поток значений во времени, на который можно подписаться. Angular широко использует RxJS — HTTP-запросы, события маршрутизатора, формы и EventEmitter — всё основано на Observable — поэтому понимание их критически важно.
Promise: a SINGLE future value, eager, can't cancel
Observable: ZERO-to-MANY values over time, lazy (runs on subscribe), CANCELLABLE
Observable может испускать несколько значений, выполняется только при подписке и может быть отписан (отменён) — делая его идеальным для событий, потоков и HTTP, которые вы можете захотеть отменить.
import { HttpClient } from "@angular/common/http";
this.http.get<User[]>("/api/users").subscribe({
next: (users) => this.users = users, // each emitted value
error: (err) => console.error(err), // on error
complete: () => console.log("done"), // stream finished
});
Ничего не происходит, пока вы не вызовете .subscribe() — Observable ленив.
import { map, filter, debounceTime } from "rxjs/operators";
this.searchInput.valueChanges.pipe(
debounceTime(300), // wait for typing to pause
filter(text => text.length > 2), // ignore short queries
map(text => text.trim()), // transform
).subscribe(query => this.search(query));
Операторы (цепочка в .pipe()) декларативно трансформируют поток — debounce, filter, map и т.д. — элегантно решая типичные асинхронные проблемы (например, поиск по мере ввода).
import { Subscription } from "rxjs";
private sub = new Subscription();
ngOnInit() { this.sub = this.data$.subscribe(...); }
ngOnDestroy() { this.sub.unsubscribe(); } // ❗ prevent leaks
Манипулировать подписками нужно в ngOnDestroy, иначе они будут продолжать работать после удаления компонента — утечка памяти. Типичные решения: async pipe (автоматическая отписка) или takeUntilDestroyed().
<!-- ✅ the async pipe handles subscription AND cleanup for you -->
<li *ngFor="let user of users$ | async">{{ user.name }}</li>
Observable из RxJS вплетены в Angular — вы не можете использовать HttpClient, реактивные формы или маршрутизатор без них.
Понимание подписки, операторов и особенно отписки (или использование async pipe, чтобы избежать ручного управления) критически важно: это и источник силы Angular для асинхронных данных, и один из его наиболее частых подводных камней (утечки из забытых подписок).