SuperAPI AI 工具集

angular-core

前端与建站

查看项目

更新于 10-15 14:51

技能介绍

用途

本技能用于在开发 Angular 应用时提供核心模式的规范指导。当需要创建 Angular 组件、使用 signals 管理状态,或进行项目初始化配置时,可依据本技能给出的模式编写代码。

主要能力

独立组件(Standalone Components)

组件默认即为独立组件,不需要显式设置 standalone: true。示例中组件使用 imports 引入依赖,并设置 changeDetection: ChangeDetectionStrategy.OnPush。

Input/Output 函数

推荐使用基于函数的写法:input.required、input、output、model(双向绑定)。明确禁止使用 @Input()、@Output() 装饰器与 EventEmitter。

Signals 状态管理

使用 signal 定义状态,computed 派生计算值,通过 set/update 更新,effect 处理副作用(如写入 localStorage)。

不使用生命周期钩子

signals 取代生命周期钩子,不使用 ngOnInit、ngOnChanges、ngOnDestroy。响应输入变化使用 effect() 监听输入 signal;派生数据使用 computed();副作用(API 调用、localStorage)使用 effect();销毁清理使用 DestroyRef + inject()。

inject() 替代构造函数注入

推荐 private readonly http = inject(HttpClient),禁止构造函数参数注入写法。

原生控制流

使用 @if / @else、@for(配合 track)、@empty、@switch / @case / @default 等模板语法。

RxJS 仅在需要时使用

signals 为默认选择。仅在复杂异步操作时使用 RxJS,例如合并多个流、防抖/节流、竞态条件、WebSocket 实时数据、复杂错误重试逻辑。简单 API 调用使用 signals,必要时通过 toSignal 将流转换为 signal。

无 Zone(Zoneless)Angular

使用 provideZonelessChangeDetection() 进行引导。移除 ZoneJS:执行 npm uninstall zone.js,并从 angular.json 的 polyfills 中移除 zone.js 与 zone.js/testing。Zoneless 要求:使用 OnPush 变更检测、使用 signals 管理状态(自动通知 Angular)、对 observables 使用 AsyncPipe、必要时使用 markForCheck()。

使用方式

技能内容以代码示例与对照表形式给出推荐(✅ ALWAYS)与禁止(❌ NEVER)的写法,并附有“何时使用什么”的对照表,帮助在具体场景中选择 signals、computed、effect 或 RxJS。

适用场景

适用于 Angular 组件开发、状态管理、依赖注入、模板控制流编写以及 zoneless 配置等场景。

限制

资料未提供该技能的安装方式、版本要求、收费信息或具体平台支持范围,这些内容暂未提供。