Conectando sinais e RxJS
Faça a ponte entre sinais e observáveis usando interoperabilidade.
Conectando sinais e RxJS é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.
Dois mundos reativos
Os aplicativos Angular combinam sinais (síncronos e baseados em consulta) e Observables do RxJS (fluxos assíncronos e baseados em emissão). O pacote @angular/core/rxjs-interop faz a ponte entre eles com toSignal e toObservable.
Noções básicas de toSignal
toSignal() assina um Observable e expõe seu valor mais recente como um sinal somente leitura. A assinatura é cancelada automaticamente quando o contexto de injeção é destruído.
import { toSignal } from '@angular/core/rxjs-interop';
clock = toSignal(interval(1000), { initialValue: 0 });
// read in template: {{ clock() }}initialValue e leituras síncronas
Os Observables podem não emitir de forma síncrona, portanto um sinal precisa de um valor inicial. Forneça initialValue ou use requireSync: true quando houver garantia de que a fonte emitirá imediatamente (como um BehaviorSubject).
value = toSignal(this.behaviorSubject$, { requireSync: true });Substituindo o pipe async
toSignal frequentemente substitui o pipe async. Em vez de data$ | async, leia data() diretamente, o que se compõe de forma limpa com computed().
private http = inject(HttpClient);
users = toSignal(this.http.get<User[]>('/api/users'), { initialValue: [] });
count = computed(() => this.users().length);Noções básicas de toObservable
toObservable() transforma um sinal em um Observable que emite sempre que o sinal muda. É útil quando precisa de operadores do RxJS, como debounceTime ou switchMap.
import { toObservable } from '@angular/core/rxjs-interop';
query = signal('');
query$ = toObservable(this.query);Pipeline de pesquisa com debounce
Combine as duas direções: um sinal alimenta toObservable, o RxJS aplica debounce e muda para uma chamada HTTP, e toSignal transforma os resultados novamente em um sinal.
query = signal('');
results = toSignal(
toObservable(this.query).pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => this.api.search(q))
), { initialValue: [] }
);Contexto de injeção
Ambos os auxiliares precisam de um contexto de injeção (eles gerenciam assinaturas vinculadas a um ciclo de vida). Chame-os como inicializadores de campos ou passe um injector explícito se for chamá-los mais tarde.
constructor() {
this.data = toSignal(this.source$); // ok: in constructor
}Tratamento de erros
Se o Observable de origem gerar um erro, toSignal o lançará novamente durante a leitura. Trate os erros dentro do pipeline com catchError para que o sinal mantenha um valor utilizável.
results = toSignal(
toObservable(this.query).pipe(
switchMap(q => this.api.search(q).pipe(catchError(() => of([]))))
), { initialValue: [] }
);Temporização de toObservable
toObservable usa um efeito internamente, portanto as emissões são entregues na próxima microtarefa, e não de forma síncrona. Alterações rápidas no sinal são agrupadas, mantendo apenas o valor mais recente.
Quando usar cada um
Use toObservable quando precisar de operadores baseados em tempo ou de ordem superior. Use toSignal para consumir qualquer fluxo em modelos de leitura de templates e computados, sem fazer assinaturas manualmente.
A limpeza é automática
Ambos os auxiliares vinculam suas assinaturas ao ciclo de vida do contexto de injeção. Quando o componente ou serviço é destruído, a assinatura é desfeita, evitando vazamentos sem a necessidade de unsubscribe() manual.
Verificação rápida
Verifique seus conhecimentos sobre a interoperabilidade.
Recapitulação
Você fez a ponte entre sinais e RxJS: toSignal consome fluxos como sinais somente leitura (com initialValue/requireSync) e toObservable expõe sinais como fluxos para operadores do RxJS. As assinaturas são limpas automaticamente por meio do contexto de injeção.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 38
- Aulas
- 144
Perguntas Frequentes
A aula “Conectando sinais e RxJS” é grátis?
Sim — o texto completo de “Conectando sinais e RxJS” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.
O que vou aprender em “Conectando sinais e RxJS”?
Faça a ponte entre sinais e observáveis usando interoperabilidade. Você pratica Angular Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Angular Academy?
Nenhuma experiência prévia é necessária. Angular Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Conectando sinais e RxJS”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Angular Academy?
Sim. Cada aula de Angular Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Armazenamentos de sinais em serviços
- Derivando estado com computed
- Atualizando o estado de forma imutável
- Conectando sinais e RxJS