Signals 新特性

Angular 16+ 引入 Signals：细粒度响应式原语，API 类似 Vue 3 核心 的 ref / computed。长期趋势是 Zone.js 可选化 + Signals 驱动变更检测，与 React 19 方向趋同。

学习目标

• 使用 signal()、computed()、effect()
• 在组件模板绑定 Signal
• 理解 Signals 与 RxJS 的分工

核心内容

基础 Signal

import { Component, signal, computed } from "@angular/core";

@Component({
  selector: "app-counter",
  standalone: true,
  template: `
    <p>计数：{{ count() }}</p>
    <p>双倍：{{ doubled() }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = signal(0);
  doubled = computed(() => this.count() * 2);

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

模板中 Signal 像函数一样 调用 count() 读取值；更新用 set / update。

输入 Signal（Angular 17.1+）

@Component({ /* ... */ })
export class TrackBadgeComponent {
  slug = input.required<string>();
  label = computed(() => this.slug().replace(/-/g, " "));
}

替代部分 @Input() 场景，类型更安全（TypeScript 核心）。

与 RxJS 桥接

tracks = toSignal(this.trackService.list(), { initialValue: [] as Track[] });

新代码优先 Signals 管 UI 状态；HTTP 流仍用 RxJS + toSignal。

练习

• 用 computed 过滤 track 列表（按 keyword signal）
• 把 HttpClient 结果经 toSignal 绑到模板

小结

Signals = 细粒度响应式；与 RxJS 并存是 modern Angular。 下一课框架对比。