Retour au cours

Créer et s'abonner à des Observables

Le Développeur Angular Complet : de Zéro à Héros

53. Créer et s'abonner à des Observables

Il existe plusieurs fonctions d'usine dans RxJS pour créer facilement des Observables.

1. Créer des Observables de zéro

Utilisez new Observable() lors de la liaison de sources asynchrones (comme setInterval ou WebSockets) qui ne renvoient pas nativement des Observables.

typescript import { Observable } from 'rxjs';

const mouseMove$ = new Observable(observer => { const handler = (event: MouseEvent) => observer.next(event); document.addEventListener('mousemove', handler);

// Retourner la fonction de nettoyage return () => document.removeEventListener('mousemove', handler); });

const subscription = mouseMove$.subscribe(event => { console.log(Souris à : ${event.clientX}, ${event.clientY}); });

// Pour arrêter l'écoute : // subscription.unsubscribe();

2. Fonctions factory pour les sources simples

FactoryDescription
of()Émet une séquence fixe de valeurs puis se termine.
from()Convertit un tableau, une promise ou un itérable en Observable.
interval()Émet des nombres séquentiels périodiquement.
timer()Émet une valeur après un délai spécifié, puis se répète optionnellement.

typescript import { of, from } from 'rxjs';

of(10, 20, 30).subscribe(val => console.log('of:', val)); // Émet 10, 20, 30, puis termine

from(['A', 'B', 'C']).subscribe(val => console.log('from:', val)); // Émet A, B, C, puis termine

// interval(1000).subscribe(count => console.log(count)); // Émet 0, 1, 2, ... chaque seconde

3. L'objet Subscription

Lorsque nous appelons subscribe(), nous obtenons un objet Subscription. Gardez toujours une trace des abonnements pour les Observables à longue durée de vie et appelez unsubscribe() dans ngOnDestroy.