用途
Angular Component 是一个用于创建 Angular v20+ 现代独立组件的技能。它面向构建 UI 组件的场景，指导开发者按照 Angular v20+ 的最佳实践编写组件。资料明确指出：组件默认即为独立组件，不要设置 standalone: true。
主要能力
该技能覆盖以下组件开发要点：
- 组件结构：使用 @Component 装饰器定义选择器、变更检测策略、host 绑定、模板与样式，并通过 export class 导出组件。
- Signal 输入：支持 input.required() 定义必填输入、input(默认值) 定义可选输入、input<string>() 定义允许 undefined 的输入，以及通过 alias 设置模板绑定别名、通过 transform 使用 booleanAttribute、numberAttribute 等转换函数。
- Signal 输出：使用 output() 定义输出，支持别名，并可通过 outputFromObservable 与 RxJS 互操作，使用 emit 发送值。
- Host 绑定：在 @Component 的 host 对象中声明静态属性、动态 class 绑定、动态 style 绑定、属性绑定和事件监听，不使用 @HostBinding 或 @HostListener 装饰器。
- 内容投影：通过 ng-content 及 select 属性实现具名内容投影，例如 card-header、card-footer。
- 生命周期钩子：支持 OnInit、OnDestroy，以及 afterNextRender（首次渲染后运行一次，SSR 安全）和 afterRender（每次渲染后运行）。
- 无障碍要求：组件必须通过 AXE 无障碍检查、满足 WCAG AA 标准、为交互元素提供正确的 ARIA 属性、支持键盘导航并保持可见的焦点指示。
- 模板语法：使用原生控制流 @if、@else if、@else、@for（配合 track）、@empty、@switch、@case、@default，不使用 *ngIf、*ngFor、*ngSwitch。
- Class 与 Style 绑定：使用 [class.active]、[class]、[style.color]、[style.width.px] 等直接绑定，不使用 ngClass 或 ngStyle。
- 图片优化：对静态图片使用 NgOptimizedImage，通过 ngSrc、width、height、priority 等属性配置。
使用方式
资料以代码示例展示各组件的写法，包括：
- 一个 UserCard 组件示例，演示必填输入、带默认值的可选输入、带 transform 的输入、computed 派生值、输出以及点击处理。
- 一个 Button 组件示例，演示 host 对象中的 role、class 绑定、style 绑定、attr 绑定与键盘事件监听。
- 一个 Card 组件示例，演示具名内容投影。
- 一个 Toggle 组件示例，演示 role="switch"、aria-checked、aria-label、tabindex 以及键盘交互。
- 一个 Hero 组件示例，演示 NgOptimizedImage 的用法。
资料还提到，更详细的模式可参见 references/component-patterns.md。
适用场景
适用于在 Angular v20+ 项目中构建 UI 组件，尤其是希望采用 signal 输入输出、OnPush 变更检测、host 对象绑定、原生控制流和内容投影等新版推荐写法的开发场景。
限制
资料未提供该技能的安装命令、收费方式、价格、平台支持范围或具体使用效果等信息，这些内容暂未提供。