SuperAPI AI 工具集

angular-20-standalone-component

前端与建站

查看项目

更新于 10-15 18:28

技能介绍

用途:帮助按现代 Angular 20 规范创建独立组件(Standalone Component),并遵循既定架构约定。

主要能力:

  • 独立组件,零 NgModules;
  • 用 signal()、computed()、effect() 管理状态;
  • 用 input()/output() 函数取代 @Input()/@Output() 装饰器;
  • 使用 @if、@for(含 track、@empty)、@switch 新控制流语法,禁止旧 *ngIf/*ngFor/[ngSwitch];
  • 用 inject() 做依赖注入,禁止构造函数注入;
  • 启用 OnPush 变更检测;
  • 组件只负责 UI,业务逻辑注入服务,不直接注入 repository;
  • 跨模块通信用 EventBus;
  • 订阅使用 takeUntilDestroyed(this.destroyRef) 自动清理。

使用方式:提供组件模板骨架,包含导入 SHARED_IMPORTS、按需导入服务,示例涵盖容器型与展示型组件、响应式表单(FormBuilder/ReactiveFormsModule)等写法。创建组件时按清单检查:独立组件与 imports、Signals 状态与派生状态、input()/output()、新控制流语法、inject()、OnPush、无业务逻辑、错误处理、加载与空状态、TypeScript 严格类型。

适用场景:Angular 20 项目中的组件开发与重构。

限制:资料中未提供该技能的安装命令、收费与价格信息、依赖版本、平台支持范围及实测效果,暂未提供。