SuperAPI AI 工具集

frontend-angular-component

前端与建站

查看项目

更新于 10-15 21:35

技能介绍

用途:在 EasyPlatform 的 WebV2(Angular 19)项目中创建或修改 Angular 组件时使用,确保继承正确基类、遵循状态管理与平台约定。

主要能力:提供组件类型决策树(简单展示用 AppBaseComponent、可变视图模型用 AppBaseVmComponent、用户输入表单用 AppBaseFormComponent、复杂状态/CRUD/列表用 AppBaseVmStoreComponent、可复用展示型组件用 AppBaseComponent + @Input/@Output);规定始终使用 AppBase* 而非直接 Platform* 以获得认证/角色上下文。

使用方式:先搜索已有组件(grep "{Feature}Component" --include="*.ts");阅读设计系统文档;按决策树选基类;创建 {feature}.component.ts、.html、.scss,必要时加 .store.ts;按参考模式实现;最后按清单自检。文件位置:src/Frontend/apps/{app-name}/src/app/features/{feature}/。

关键规则:内容用 <app-loading-and-error-indicator [target]="this"> 包裹;@for 循环使用 track 与 ngForTrackByItemProp;所有订阅用 .pipe(this.untilDestroyed()).subscribe();store 在组件级 providers: [FeatureStore];API 调用通过 PlatformApiService 子类,禁止直接使用 HttpClient;逻辑放在最低层(Entity/Model > Service > Component)。

实现前必读:.claude/skills/shared/angular-design-system.md、.claude/skills/shared/bem-component-examples.md、.claude/skills/frontend-angular-component/references/component-patterns.md,以及目标应用设计系统 docs/design-system/README.md 和 02-component-catalog.md。

反模式:需要认证时却继承 PlatformComponent;手动管理 Subscription;构造函数注入 HttpClient;缺少加载/错误指示器包裹;模板元素缺少 BEM 类。

验证清单:基类选择正确;store 在组件级提供;加载/错误已包裹;订阅使用 untilDestroyed();@for 有 track-by;认证检查使用基类 hasRole();所有元素有 BEM 类。

限制:仅面向 EasyPlatform WebV2 Angular 19;未提供具体命令、配置或依赖版本;需先具备对应设计系统文档与共享技能文件。