用途:按 Angular v20+ 最佳实践创建现代独立组件(standalone component),用于构建 UI 组件。组件默认即为独立,资料明确要求不要设置 standalone: true。
主要能力与约定:
- 使用 signal 输入:input.required() 表示必填,input(默认值) 表示可选,支持 alias 别名与 transform 转换函数(如 booleanAttribute、numberAttribute)。
- 使用 signal 输出:output() 定义输出,outputFromObservable() 用于 RxJS 互操作,通过 emit 发送值。
- 变更检测使用 ChangeDetectionStrategy.OnPush。
- 宿主绑定使用 @Component 的 host 对象,资料明确不要使用 @HostBinding 或 @HostListener 装饰器,可写静态属性、class/style/attr 绑定与事件监听。
- 模板使用原生控制流 @if、@for(含 track、@empty)、@switch,资料明确不要使用 *ngIf、*ngFor、*ngSwitch。
- class 与 style 使用直接绑定,资料明确不要使用 ngClass 或 ngStyle。
- 内容投影使用 ng-content,可配合 select 选择器。
- 生命周期与渲染钩子:OnInit、OnDestroy,以及 afterNextRender、afterRender(用于 SSR 安全的 DOM 操作)。
- 图片使用 NgOptimizedImage,通过 ngSrc、width、height、priority 等属性。
无障碍要求:组件必须通过 AXE 无障碍检查、满足 WCAG AA 标准,为交互元素添加正确的 ARIA 属性,支持键盘导航,并保持可见的焦点指示。
使用方式:资料未提供安装命令或调用步骤,仅给出组件编写规范与示例;更详细的模式见 references/component-patterns.md。
限制:资料未说明收费、价格、支持平台或具体效果;上述内容仅为编码规范,未提供可直接运行的完整项目配置说明。