スキル Angular 20 Standalone Component
⚡
Angular 20 Standalone Component
安全
创建 Angular 20 独立组件
Angular 20 引入了重大的语法改进，提升了性能和开发体验。本技能帮助开发者使用 Signals、新的输入输出函数以及现代控制流语法来搭建生产就绪的独立组件。
対応: Claude Codex Code(CC)
1
スキルZIPをダウンロード
2
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
3
オンにして利用開始
テストする
「Angular 20 Standalone Component」を使用しています。 创建一个用于显示产品列表的 Angular 20 独立组件，带有加载状态
期待される結果:
- ✓ 组件选择器: app-product-list
- ✓ 使用 signal() 管理产品、加载和错误状态
- ✓ 使用 computed() 计算 hasProducts 派生状态
- ✓ 使用 inject() 注入 ProductService
- ✓ 使用 @if/@for 控制流语法
- ✓ 启用 OnPush 变更检测
- ✓ 使用 nz-alert 进行适当的错误处理
セキュリティ監査
安全v3 • 1/10/2026
Pure prompt-based skill containing only documentation and TypeScript code examples for Angular 20 component patterns. No executable scripts, network calls, file system access, or code execution capabilities. Contains only instructional content describing Angular best practices.
1
スキャンされたファイル
369
解析された行数
0
検出結果
3
総監査数
セキュリティ問題は見つかりませんでした
監査者: claude 監査履歴を表示 →
品質スコア
38
アーキテクチャ
100
保守性
83
コンテンツ
22
コミュニティ
100
セキュリティ
61
仕様準拠
作れるもの
新组件脚手架
根据项目标准和现代模式快速生成 Angular 20 组件
模式参考指南
参考正确语法以将传统 Angular 代码迁移到 Angular 20 模式
团队标准执行
通过三层架构确保团队代码库中的组件架构一致性
これらのプロンプトを試す
基础组件
创建一个名为 UserCardComponent 的 Angular 20 独立组件，使用 input() 接收用户数据并使用 output() 发送事件来显示用户信息。
智能组件
创建一个名为 TaskDashboardComponent 的 Angular 20 智能组件，使用 Signals 从服务加载数据并管理加载和错误状态。
表单组件
使用 FormBuilder、验证和适当的错误处理创建一个带有响应式表单的 Angular 20 表单组件，配合 nz-form 组件使用。
展示组件
创建一个带有 OnPush 变更检测的 Angular 20 展示组件，通过 input() 接收数据并通过 output() 发出更改，不包含业务逻辑。
ベストプラクティス
- 对所有组件状态使用 signal() 并通过 asReadonly() 暴露以实现不可变访问
- 对独立组件始终使用 OnPush 变更检测以提升性能
- 使用 inject() 函数注入服务而非构造函数以获得更清晰的代码
- 分离关注点：智能组件处理数据加载，展示组��仅渲染数据
回避
- 使用 @Input()/@Output() 装饰器而非 input()/output() 函数
- 使用 *ngIf/*ngFor 而非 @if/@for 控制流语法
- 在组件中直接注入仓库而非服务
- 将业务逻辑放在组件中而非服务层
よくある質問
独立组件需要什么 Angular 版本？
Angular 14+ 支持独立组件，但 input()/output() 函数和控制流语法需要 Angular 17.2+。
我可以将此技能与 Angular 17 或 18 一起使用吗？
可以，但某些功能如 input()/output() 函数需要 Angular 17.2+。在旧版本中使用基于装饰器的 @Input/@Output。
此技能适用于 nx 单体仓库项目吗？
可以，这些模式与 Nx 单体仓库兼容。根据您的工作区结构调整导入路径。
使用此技能时我的数据安全吗？
是的，这是一个基于提示的技能，不执行代码或访问网络。它仅提供指导。
为什么我的组件在数据更改时不更新？
确保使用 OnPush 变更检测并调用 signal.set() 或 signal.update() 来正确触发变更检测。
这与 Angular CLI 生成有何不同？
此技能应用现代 Angular 20 模式。Angular CLI 默认生成传统语法，需要手动更新。