Conversión de señales en observables en angular: lo que necesita saber

Angular v16 presenta el nuevo paquete rxjs-interop, que viene con una función útil llamada toObservableque permite a los desarrolladores convertir signalun archivo observable. En este artículo, exploraremos esta nueva función y cómo se puede utilizar.

Primero, necesitamos importar la toObservablefunción desde el @angular/core/rxjs-interopmódulo. Aquí hay un fragmento de código de ejemplo que demuestra su uso:

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

@Component({
  standalone: true,
  template: `
    <input (input)="value.set(input.value)" #input />
  `,
})
export class FooComponent {
  value = signal('');
  value$ = toObservable(this.value);

  ngOnInit() {
    this.value$.subscribe(console.log);
  }
}

Debajo del capó, la toObservablefunción crea un ReplaySubjecty envuelve el proporcionado signalen un effect. Cuando el signalvalor cambia, effectemitirá el nuevo valor.

Un beneficio de usar señales es que no necesitamos agregar el distinctUntilChangedoperador, ya que el trabajo ya está hecho en el signalnivel. Además, si signalarroja un error, se pasará como una notificación de error al suscriptor.

Un efecto interesante de usar el efecto () para emitir valores es que el valor se entregará de forma asíncrona . Esto significa que incluso si emitimos múltiples valores en el mismo “tick”, solo recibiremos el último valor de la señal.

Es importante tener en cuenta que cuando toObservablese llama a la función, se comprueba para asegurarse de que se está llamando en un contexto de inyección . Si no, se lanzará un error. Esto significa que podemos usar la toObservablefunción solo cuando la inject()función está disponible, excepto en los casos en que pasamos explícitamente injector.

@Component({
  standalone: true,
  template: `
    <input (input)="value.set(input.value)" #input />
  `,
})
export class FooComponent {
  value = signal('');
  private injector = inject(Injector);
 
  ngOnInit() {
    const value$ = toObservable(this.value, {
      injector: this.injector
    }).subscribe(console.log);
  }
}

¡ Sígueme en Medium o Twitter para leer más sobre Angular y JS!