什么是信号
了解信号如何充当响应式状态容器。
什么是信号 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
什么是信号?
信号是现代 Angular 引入的一种响应式基本单元。它是对某个值的封装,当该值发生变化时,可以通知相关消费者。
信号让 Angular 的响应式机制更加明确、细粒度更高,也更易于理解。
响应式为何重要
在 UI 框架中,屏幕必须与数据保持同步。当数据发生变化时,视图也应随之更新。
信号让 Angular 能够精确知道具体发生了什么变化以及哪些内容依赖于它,因此只需刷新视图中受影响的部分。
信号出现之前的问题
过去,Angular 依赖 Zone.js 和范围较大的变更检测:每次异步事件发生后,Angular 都会重新检查组件树中的大部分内容。
这种方式能够正常工作,但可能造成浪费。信号可以在无需扫描所有内容的情况下实现细粒度更新。
信号保存一个值
您可以把信号想象成包裹某个值的智能盒子。您可以读取其中的内容,也可以替换其中的内容。
读取信号时还会记录读取者,因此稍后可以更新依赖它的内容。
import { signal } from '@angular/core';
const count = signal(0);
// count is now a signal holding the number 0读取就是一次函数调用
一个关键概念是:要读取信号,您需要像调用函数一样调用它。括号是 Angular 判断您正在读取当前值的依据。
const count = signal(0);
console.log(count()); // 0 <-- note the ()信号是同步的
读取信号是同步操作,并且始终会立即返回当前值。这里没有订阅、没有异步管道,也不需要管理手动取消订阅。
可写信号与计算信号
使用 signal() 创建的基本信号是可写的:您可以更改它的值。
此外还有计算信号(派生值)和副作用,它们都建立在可写信号之上。
信号会跟踪依赖
当计算值或模板读取信号时,Angular 会自动记录这种依赖关系。
之后,如果信号发生变化,只有依赖它的内容会重新计算。这正是信号高效的原因。
无闪烁更新
信号的设计目标是无闪烁:消费者始终看到一致的值,不会收到处于中间状态或更新不完整的值。
这使复杂的响应式关系图更加可预测。
信号位于何处
信号属于 @angular/core。您可以从那里导入 signal、computed 和 effect。
您可以在组件、服务或任何 TypeScript 代码中使用信号。
import { signal, computed, effect } from '@angular/core';组件中的信号
一种常见模式是在组件中将信号声明为类字段,然后在模板中读取它们。
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '' })
export class CounterComponent {
count = signal(0);
}快速检查:信号基础
让我们检查一下您对信号概念的理解。
回顾:什么是信号
您已经学会,信号是对值的响应式封装,会在值发生变化时通知消费者。您可以通过使用括号调用信号来读取它;读取是同步的,而信号支持细粒度且无闪烁的更新。
接下来,您将创建并读取自己的信号。
常见问题解答
「什么是信号」课时是免费的吗?
是的 — 「什么是信号」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Angular Academy 课程的其余内容,请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「什么是信号」这节课中我会学到什么?
了解信号如何充当响应式状态容器。 你通过在浏览器中直接运行的动手代码来练习 Angular Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 1 节课,共 4 节。
「什么是信号」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗?
能。每节 Angular Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。