SuperAPI AI 工具集

angular-signals

前端与建站

查看项目

更新于 10-19 16:18

技能介绍

用途:该技能面向 Angular v20 及以上版本,指导开发者使用 Signal 这一响应式原语进行状态管理,提供同步、细粒度的响应式能力。

主要能力:

  1. signal() 创建可写状态,可通过 count() 读取、set() 赋值、update() 基于当前值更新,并支持显式类型标注与自定义相等函数(仅在值变化时触发更新)。
  2. computed() 创建派生状态,依赖变化时自动重新计算,可承载过滤、汇总等复杂逻辑,也支持通过 untracked() 排除对特定信号的依赖。
  3. linkedSignal() 创建可重置的关联状态,当源信号变化时可重置为默认值,或借助 previous 保留原选择。
  4. effect() 执行副作用,需在注入上下文中运行,组件销毁时自动清理,并支持通过 onCleanup 注册清理逻辑。
  5. RxJS 互操作:toSignal() 将 Observable 转为 Signal(支持 initialValue、allowUndefined、requireSync),toObservable() 将 Signal 转为 Observable,以便使用 debounceTime、switchMap 等操作符。

使用方式:资料给出了组件状态模式(在组件内声明状态信号与派生信号,在模板中通过 @for 等语法消费)和服务状态模式(服务内部用私有可写信号,对外暴露 asReadonly() 的只读信号与 computed() 派生的状态,并提供 login、logout 等方法)。此外还给出了待办列表、搜索防抖等代码示例。

适用场景:Angular v20+ 应用中的本地组件状态、跨组件共享的服务状态、需要与 RxJS 流协同的场景,以及需要派生数据与副作用联动的界面逻辑。

限制:资料仅说明适用于 Angular v20+,未提供安装命令、收费信息、性能数据或具体平台支持范围;更多高级模式(如 resource())指向 references/signal-patterns.md,但该文件内容暂未提供。