Conectar Signals y RxJS
Conectar signals y observables mediante interoperabilidad
Conectar Signals y RxJS es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Dos mundos reactivos
Las aplicaciones Angular combinan signals (síncronas y basadas en extracción) y RxJS Observables (flujos asíncronos y basados en emisión). El paquete @angular/core/rxjs-interop sirve de puente entre ambos mediante toSignal y toObservable.
Conceptos básicos de toSignal
toSignal() se suscribe a un Observable y expone su último valor como una señal de solo lectura. Cancela la suscripción automáticamente cuando se destruye el contexto de inyección.
import { toSignal } from '@angular/core/rxjs-interop';
clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}initialValue y lecturas síncronas
Los Observables pueden no emitir de forma síncrona, por lo que una señal necesita un valor inicial. Proporcione initialValue o use requireSync: true cuando se garantice que la fuente emitirá inmediatamente, como ocurre con un BehaviorSubject.
value = toSignal(this.behaviorSubject$, { requireSync: true });Sustituir el pipe async
toSignal suele sustituir al pipe async. En lugar de data$ | async, lea data() directamente; así se combina correctamente con computed().
private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);Conceptos básicos de toObservable
toObservable() convierte una señal en un Observable que emite cada vez que cambia la señal. Es útil cuando necesita operadores de RxJS como debounceTime o switchMap.
import { toObservable } from '@angular/core/rxjs-interop';
query = signal('');
query$ = toObservable(this.query);Pipeline de búsqueda con debounce
Combine ambas direcciones: una señal alimenta toObservable, RxJS aplica debounce y cambia a una llamada HTTP, y toSignal convierte los resultados de nuevo en una señal.
query = signal('');
results = toSignal(
toObservable(this.query).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.api.search(q))
), { initialValue: [] }
);Contexto de inyección
Ambos helpers necesitan un contexto de inyección, ya que gestionan suscripciones vinculadas a un ciclo de vida. Llámelos como inicializadores de campos o pase un injector explícito si los llama más adelante.
constructor() {
this.data = toSignal(this.source$); // ok: in constructor
}Gestión de errores
Si el Observable de origen produce un error, toSignal lo vuelve a lanzar al leerlo. Gestione los errores dentro del pipeline con catchError para que la señal conserve un valor utilizable.
results = toSignal(
toObservable(this.query).pipe(
switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
), { initialValue: [] }
);Temporización de toObservable
toObservable utiliza un effect internamente, por lo que las emisiones se entregan en la siguiente microtarea, no de forma síncrona. Los cambios rápidos de una señal se agrupan y se conserva el último valor.
Cuándo usar cada uno
Use toObservable cuando necesite operadores basados en tiempo o de orden superior. Use toSignal para consumir cualquier flujo en plantillas y modelos de lectura calculados sin suscribirse manualmente.
La limpieza es automática
Ambos helpers vinculan su suscripción al ciclo de vida del contexto de inyección. Cuando se destruye el componente o servicio, la suscripción se cancela, lo que evita fugas sin necesidad de llamar manualmente a unsubscribe().
Comprobación rápida
Compruebe sus conocimientos sobre interoperabilidad.
Resumen
Conectó signals y RxJS: toSignal consume flujos como señales de solo lectura (con initialValue/requireSync) y toObservable expone señales como flujos para los operadores de RxJS. Las suscripciones se limpian automáticamente mediante el contexto de inyección.
Preguntas frecuentes
¿La lección «Conectar Signals y RxJS» es gratis?
Sí — el texto completo de «Conectar Signals y RxJS» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Conectar Signals y RxJS»?
Conectar signals y observables mediante interoperabilidad Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Conectar Signals y RxJS»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Signal Stores en servicios
- Derivar el estado con computed
- Actualizar el estado de forma inmutable
- Conectar Signals y RxJS