Angular Academy · 课时

连接信号与 RxJS

Q: 「连接信号与 RxJS」这节课中我会学到什么？

使用互操作连接信号与可观察对象 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用互操作连接信号与可观察对象

连接信号与 RxJS 是 CoddyKit 上的免费 Angular Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。

两种响应式世界

Angular 应用会混合使用 signals（同步、基于拉取）和 RxJS Observables（异步、基于推送的流）。@angular/core/rxjs-interop 包通过 toSignal 和 toObservable 在两者之间建立桥接。

toSignal 基础

toSignal() 会订阅一个 Observable，并将其最新值作为只读信号公开。当注入上下文被销毁时，它会自动取消订阅。

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

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

initialValue 与同步读取

Observable 可能不会同步发出值，因此信号需要一个初始值。请提供 initialValue；如果源保证会立即发出值（例如 BehaviorSubject），则可以使用 requireSync: true。

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

替代 async 管道

toSignal 通常可以替代 async 管道。您无需使用 data$ | async，而是直接读取 data()，这样也能与 computed() 顺畅组合。

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

toObservable 基础

toObservable() 会将信号转换为 Observable，并在信号发生变化时发出值。当您需要使用 debounceTime 或 switchMap 等 RxJS 操作符时，这非常有用。

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

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

防抖搜索管道

将两个方向结合起来：信号为 toObservable 提供输入，RxJS 进行防抖并切换到 HTTP 调用，然后由 toSignal 将结果重新转换为信号。

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

注入上下文

这两个辅助函数都需要注入上下文（它们会管理与生命周期绑定的订阅）。请在字段初始化器中调用它们；如果稍后调用，请传入显式的 injector。

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

错误处理

如果源 Observable 发生错误，toSignal 会在读取时重新抛出错误。请在管道内部使用 catchError 处理错误，以便信号继续保留可用值。

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

toObservable 的时序

toObservable 在底层使用 effect，因此值会在下一个微任务中传递，而不是同步传递。快速连续的信号变化会被合并，最终只保留最新值。

如何选择

当您需要基于时间或高阶操作符时，请使用 toObservable。当您要在模板和计算出的读取模型中使用任意流，且不想手动订阅时，请使用 toSignal。

自动清理

这两个辅助函数都会将订阅绑定到注入上下文的生命周期。当组件或服务被销毁时，订阅会被拆除，因此无需手动调用 unsubscribe() 就能避免内存泄漏。

快速检查

检查您对互操作的掌握程度。

回顾

您在 signals 和 RxJS 之间建立了桥接：toSignal 会将流作为只读信号使用（支持 initialValue/requireSync），而 toObservable 会将信号公开为供 RxJS 操作符使用的流。借助注入上下文，订阅会自动清理。

常见问题解答

「连接信号与 RxJS」课时是免费的吗？

是的 — 「连接信号与 RxJS」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。

「连接信号与 RxJS」这节课中我会学到什么？

使用互操作连接信号与可观察对象你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Angular Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「连接信号与 RxJS」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Angular Academy 课中编写并运行代码吗？

能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Angular Academy