Convertendo sinais em observáveis ​​em Angular: o que você precisa saber

Angular v16 apresenta o novo pacote rxjs-interop, que vem com uma função útil chamada toObservableque permite aos desenvolvedores converter um signalpara um arquivo observable. Neste artigo, exploraremos esse novo recurso e como ele pode ser usado.

Primeiro, precisamos importar a toObservablefunção do @angular/core/rxjs-interopmódulo. Aqui está um trecho de código de exemplo que demonstra seu 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);
  }
}

Sob o capô, a toObservablefunção cria um ReplaySubjecte envolve o fornecido signalem um arquivo effect. Quando o signalvalor mudar, o effectirá emitir o novo valor.

Uma vantagem de usar sinais é que não precisamos adicionar o distinctUntilChangedoperador, pois o trabalho já está feito no signalnível. Além disso, se signallançar um erro, ele será transmitido como uma notificação de erro ao assinante.

Um efeito interessante de usar o efeito () para emitir valores é que o valor será entregue de forma assíncrona . Isso significa que, mesmo que emitimos vários valores no mesmo “tick”, receberemos apenas o último valor do sinal.

É importante observar que, quando a toObservablefunção é chamada, ela verifica se está sendo chamada em um contexto de injeção . Caso contrário, um erro será lançado. Isso significa que podemos usar a toObservablefunção somente quando a inject()função estiver disponível, exceto nos casos em que passarmos um injectorexplicitamente.

@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);
  }
}

Siga-me no Medium ou Twitter para ler mais sobre Angular e JS!