0Pricing
Angular Academy · 课时

什么是信号

了解信号如何充当响应式状态容器。

什么是信号 是 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 反馈 — 无需本地设置。

此课程中的所有课时

  1. 什么是信号
  2. 创建和读取信号
  3. 使用 set 和 update 更新信号
  4. 模板中的信号
← 返回 Angular Academy