如何引导法学硕士编写Angular代码：专家经验分享

使用 AI 助手编写 Angular 代码就像与一位无所不知的人结对编程，但前提是你要问对问题。

本指南将引导您了解如何使用专家认可的 TypeScript 和 Angular 实践，以最佳方式提示Angular 应用和组件的 LLM。

TypeScript 和 Angular 最佳实践

以下是LLM应遵循的最佳实践清单。请使用这些实践来指导提示并验证输出。

TypeScript最佳实践

• 使用strict类型检查。
  
  提示符应始终假定项目使用strict: truein tsconfig.json。

• 尽量使用类型推断，如果类型很明显，
  
  就让 TypeScript 来完成工作，无需用冗余类型使代码变得混乱。

• 避免使用any；unknown这样
  
  any做会破坏类型安全。如果您还不确定类型，请咨询unknown并添加类型保护。

Angular最佳实践

成分

• 始终使用独立组件（无需特殊处理standalone: true；这是默认的）。
• 使用信号进行computed()状态管理。
• 保持组件小巧且职责单一。
• 使用input()函数output()代替装饰器 @input 和 @output。
• 放changeDetection: ChangeDetectionStrategy.OnPush。
• 对于小型组件，建议使用内联模板。
• 避免ngClass使用，ngStyle改用[class]其他[style]方式。
• 优先选择响应式表单而非模板驱动表单。

服务

• 单一职责设计服务。
• 用于providedIn: 'root'单例服务。
• 使用inject()函数，不要进行构造函数注入。

状态和模板

• 使用信号来管理局部状态。
• 用于computed()导出值。
• 保持状态纯粹和可预测。
• 在模板中，避免使用复杂的逻辑。
• 使用原生控制流（@if，，@for）@switch而不是结构化指令*ngIf，如*ngFor，，*ngSwitch。
• 使用async管道来处理可观察对象。

资产与路由

• 适用NgOptimizedImage于所有静态图像。
• 所有功能路由均使用延迟加载。

审查LLM生成的代码时

逻辑逻辑管理器（LLM）可能会出现幻觉或使用过时的模式。审查代码时，务必检查以下内容：

• ✅除非必要，否则请勿使用signals超过RxJS
• ✅computed()对于派生状态
• ✅ 正确使用inject()服务
• ✅ 简单组件的内联模板
• ✅ 避免*ngIf，*ngFor而倾向于@if，@for
• ✅ 无ngClass或ngStyle

快乐提示