了解 Angular Signals — Angular 中响应式的未来

Source: Dev.to

什么是 Signals？

Signal 是一种特殊的响应式变量。当它的值变化时，Angular 会自动更新 UI——无需订阅、无需 async pipe、也不需要样板代码。

import { signal } from '@angular/core';

const counter = signal(0);
counter(); // returns 0

可以把 signal 看作一个状态容器，在改变时会“响应”。

为什么要使用 Signals？

• 不再需要手动订阅 —— 不用再担心 subscribe() 或 unsubscribe() 的麻烦。
• 可预测的 UI 更新 —— 只有受影响的部分会重新渲染。
• 更简洁的组件逻辑 —— 像调用函数一样读取 signal：mySignal()。
• 适用于本地和共享状态 —— 大幅简化组件状态管理。

在 Angular 中如何使用 Signals

创建一个 Signal

count = signal(0);

在模板中读取

Count: {{ count() }}

更新 Signal

increment() {
  this.count.update(value => value + 1);
}

设置新值

this.count.set(100);

计算 Signal

使用 computed() 自动创建派生值。

fullName = computed(() => `${this.firstName()} ${this.lastName()}`);

只要 firstName 或 lastName 发生变化，fullName 就会立即更新。

Effects – 当 Signal 变化时运行逻辑

effect(() => {
  // 示例：发起 API 调用、记录日志或对状态变化作出响应
});

Signals 与 RxJS 的对比

Signals 不是 RxJS 的替代品；它们简化了许多 RxJS 可能显得过于复杂的常见场景，而 RxJS 在高级流式场景下仍然非常有价值。

---

Angular Signals 为 Angular 带来了现代、轻量且高度可预测的响应式模型。无论是构建小功能还是大型应用，Signals 都能帮助你写出更简洁的代码，降低认知负担。如果你还没有尝试过 Signals，现在正是最佳时机——你的 Angular 工作流会变得更快、更简洁、更愉快。