Angular Academy · Lezione

Collegare Signals e RxJS

Collegare signal e observable con l'interoperabilità

Collegare Signals e RxJS è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Due mondi reattivi

Le app Angular combinano signals (sincroni e basati sul pull) e Observable RxJS (stream asincroni e basati sul push). Il pacchetto @angular/core/rxjs-interop fa da ponte tra i due tramite toSignal e toObservable.

Nozioni di base su toSignal

toSignal() si sottoscrive a un Observable ed espone il suo valore più recente come signal di sola lettura. Annulla automaticamente la sottoscrizione quando il contesto di iniezione viene distrutto.

import { toSignal } from '@angular/core/rxjs-interop';

clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}

initialValue e letture sincrone

Gli Observable potrebbero non emettere in modo sincrono, quindi un signal ha bisogno di un valore iniziale. Fornisca initialValue oppure usi requireSync: true quando la sorgente garantisce un’emissione immediata, come un BehaviorSubject.

value = toSignal(this.behaviorSubject$, { requireSync: true });

Sostituire la pipe async

toSignal spesso sostituisce la pipe async. Invece di data$ | async, legga direttamente data(): in questo modo la composizione con computed() è più semplice.

private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);

Nozioni di base su toObservable

toObservable() trasforma un signal in un Observable che emette ogni volta che il signal cambia. È utile quando servono operatori RxJS come debounceTime o switchMap.

import { toObservable } from '@angular/core/rxjs-interop';

query = signal('');
query$ = toObservable(this.query);

Pipeline di ricerca con debounce

Combini entrambe le direzioni: un signal alimenta toObservable, RxJS applica il debounce e passa a una chiamata HTTP, quindi toSignal riconverte i risultati in un signal.

query = signal('');
results = toSignal(
  toObservable(this.query).pipe(
    debounceTime(300),
    distinctUntilChanged(),
    switchMap(q => this.api.search(q))
  ), { initialValue: [] }
);

Contesto di iniezione

Entrambi gli helper richiedono un contesto di iniezione, perché gestiscono sottoscrizioni legate al ciclo di vita. Li chiami come inizializzatori di campo oppure passi un injector esplicito se li chiama in un secondo momento.

constructor() {
  this.data = toSignal(this.source$); // ok: in constructor
}

Gestione degli errori

Se l’Observable sorgente genera un errore, toSignal lo rilancia durante la lettura. Gestisca gli errori all’interno della pipeline con catchError, così il signal mantiene un valore utilizzabile.

results = toSignal(
  toObservable(this.query).pipe(
    switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
  ), { initialValue: [] }
);

Tempistica di toObservable

toObservable usa internamente un effect, quindi le emissioni vengono distribuite nel microtask successivo, non in modo sincrono. Le modifiche rapide al signal vengono raggruppate mantenendo solo il valore più recente.

Quando usare ciascuno

Scelga toObservable quando servono operatori basati sul tempo o operatori di ordine superiore. Scelga toSignal per consumare qualsiasi stream nei template e nei modelli di lettura calcolati, senza sottoscrizioni manuali.

La pulizia è automatica

Entrambi gli helper legano la propria sottoscrizione al ciclo di vita del contesto di iniezione. Quando il componente o il servizio viene distrutto, la sottoscrizione viene terminata, prevenendo le perdite senza dover chiamare manualmente unsubscribe().

Verifica rapida

Verifichi le sue conoscenze sull’interoperabilità.

Riepilogo

Ha creato un ponte tra signals e RxJS: toSignal consuma gli stream come signal di sola lettura (con initialValue/requireSync), mentre toObservable espone i signal come stream per gli operatori RxJS. Le sottoscrizioni vengono chiuse automaticamente tramite il contesto di iniezione.

Domande Frequenti

La lezione «Collegare Signals e RxJS» è gratuita?

Sì — il testo completo di «Collegare Signals e RxJS» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Collegare Signals e RxJS»?

Collegare signal e observable con l'interoperabilità Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Collegare Signals e RxJS»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy