mcpField
A
angular-signals

angular-signals

github.com/oguzhan18开发7178 次安装31 周前更新
代码仓库

关于 angular-signals

面向 Angular Signals 开发者的参考技能，涵盖 Angular 16 及后续版本的状态管理、响应式编程和 API 指引，并说明派生值、副作用及 RxJS 互操作实践。

主要功能

  1. 01可写信号与派生信号
  2. 02信号输入与 Resource API
  3. 03RxJS 互操作
  4. 04副作用清理指引
  5. 05版本相关的 API 说明

适用场景

  1. 01管理响应式 UI 状态
  2. 02从信号派生数据
  3. 03连接 Observable 与信号

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-signals

安装后在 Claude Code 中输入/angular-signals确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular Signals

版本： Angular 16+（2025） 标签： 响应式、状态管理、Signals API

参考： Angular Signals • API 参考

API 变更

本节介绍特定版本的 API 变更。

  • 新增：Angular 19 Resource API — 以全新方式处理异步数据，并内置加载／错误状态

  • 新增：linkedSignal() — 创建与外部来源关联、带有 getter/setter 的 signal 来源

  • 新增：Signal 输入 — 使用 input() 和 input.required() 实现响应式组件输入

  • 新增：toSignal() 和 toObservable() — 在 RxJS 与 Signals 之间搭建桥接

  • 新增：effect() 改进 — 通过 onCleanup 回调更好地清理

  • 新增：无 Zone 变更检测 — 与 Signals 无缝协作

最佳实践

  • 使用 computed() 派生状态 — 切勿使用 effect() 派生值
// ✅ DO THIS - derived state
totalPrice = computed(() => {
  return this.items().reduce((sum, item) => sum + item.price, 0);
});

// ❌ DON'T - side effects in computed
badComputed = computed(() => {
  const data = this.data();
  this.logService.log(data); // Side effect - don't do this!
});
  • 使用 signal() 创建可写状态
count = signal(0);

// Update with set()
count.set(5);

// Update with update()
count.update(value => value + 1);

// Update with mutate() for objects
user.update(u => ({ ...u, name: 'New Name' }));
  • 仅将 effect() 用于副作用
effect(() => {
  analytics.track('cart-updated', {
    itemCount: this.items().length
  });
});
  • 始终清理 effects，避免内存泄漏
effect((onCleanup) => {
  const timer = setTimeout(() => { /* ... */ }, 300);
  onCleanup(() => clearTimeout(timer));
});
  • 使用 Signal 输入，而非传统的 @Input()
// Modern signal inputs (Angular 17+)
userId = input<string>('');
user = input.required<User>();

// Computed based on input
greeting = computed(() => `Hello, ${this.user()?.name}`);
  • 使用 toSignal() 将 RxJS 转换为 Signal
// Convert Observable to Signal
users = toSignal(this.http.get('/api/users'), { initialValue: [] });

  • 不要嵌套 effects — 可能导致性能问题

  • 对复杂对象比较使用相等性函数

user = signal<User | null>(null, {
  equal: (a, b) => a?.id === b?.id
});
  • UI 状态使用 Signals，复杂异步操作使用 RxJS — Signals 和 RxJS 用途不同

评论

支持 Markdown