Relier les signaux et RxJS
Faites communiquer les signaux et les observables grâce à l’interopérabilité
Relier les signaux et RxJS est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Deux mondes réactifs
Les applications Angular combinent les signaux (synchrones et fondés sur l’extraction) et les Observables RxJS (flux asynchrones et fondés sur la diffusion). Le paquet @angular/core/rxjs-interop fait le lien entre eux avec toSignal et toObservable.
Les bases de toSignal
toSignal() s’abonne à un Observable et expose sa dernière valeur sous forme de signal en lecture seule. Il se désabonne automatiquement lorsque le contexte d’injection est détruit.
import { toSignal } from '@angular/core/rxjs-interop';
clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}initialValue et lectures synchrones
Les Observables peuvent ne rien émettre de manière synchrone ; un signal a donc besoin d’une valeur initiale. Fournissez initialValue ou utilisez requireSync: true lorsque la source garantit une émission immédiate (comme un BehaviorSubject).
value = toSignal(this.behaviorSubject$, { requireSync: true });Remplacer le pipe asynchrone
toSignal remplace souvent le pipe async. Au lieu de data$ | async, vous lisez directement data(), ce qui se combine proprement avec computed().
private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);Les bases de toObservable
toObservable() transforme un signal en Observable qui émet chaque fois que le signal change. C’est utile lorsque vous avez besoin d’opérateurs RxJS comme debounceTime ou switchMap.
import { toObservable } from '@angular/core/rxjs-interop';
query = signal('');
query$ = toObservable(this.query);Pipeline de recherche avec temporisation
Combinez les deux directions : un signal alimente toObservable, RxJS applique une temporisation puis bascule vers un appel HTTP, et toSignal reconvertit les résultats en signal.
query = signal('');
results = toSignal(
toObservable(this.query).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.api.search(q))
), { initialValue: [] }
);Contexte d’injection
Les deux utilitaires ont besoin d’un contexte d’injection (ils gèrent des abonnements liés à un cycle de vie). Appelez-les comme initialisateurs de propriétés ou transmettez un injector explicite si vous les appelez plus tard.
constructor() {
this.data = toSignal(this.source$); // ok: in constructor
}Gestion des erreurs
Si l’Observable source génère une erreur, toSignal la relance lors de la lecture. Gérez les erreurs dans le pipeline avec catchError afin que le signal conserve une valeur utilisable.
results = toSignal(
toObservable(this.query).pipe(
switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
), { initialValue: [] }
);Temporisation de toObservable
toObservable utilise un effet en interne : les émissions sont donc transmises lors de la prochaine microtâche, et non de manière synchrone. Les changements rapides de signal sont regroupés pour ne conserver que la dernière valeur.
Choisir l’outil adapté
Utilisez toObservable lorsque vous avez besoin d’opérateurs temporels ou d’opérateurs d’ordre supérieur. Utilisez toSignal pour consommer n’importe quel flux dans les modèles et les modèles de lecture calculés, sans abonnement manuel.
Le nettoyage est automatique
Les deux utilitaires lient leur abonnement au cycle de vie du contexte d’injection. Lorsque le composant ou le service est détruit, l’abonnement est interrompu, ce qui évite les fuites sans unsubscribe() manuel.
Vérification rapide
Vérifiez vos connaissances sur l’interopérabilité.
Récapitulatif
Vous avez fait le lien entre les signaux et RxJS : toSignal consomme les flux sous forme de signaux en lecture seule (avec initialValue/requireSync), tandis que toObservable expose les signaux sous forme de flux pour les opérateurs RxJS. Les abonnements sont automatiquement nettoyés via le contexte d’injection.
Apprends HTML avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 38
- Leçons
- 144
Questions Fréquemment Posées
La leçon « Relier les signaux et RxJS » est-elle gratuite ?
Oui — le texte complet de « Relier les signaux et RxJS » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Relier les signaux et RxJS » ?
Faites communiquer les signaux et les observables grâce à l’interopérabilité Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Relier les signaux et RxJS » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Magasins de signaux dans les services
- Dériver l’état avec computed
- Mettre à jour l’état de manière immuable
- Relier les signaux et RxJS