analogjs/angular-component

angular-component 是做什么的？

创建遵循Angular v20+最佳实践的现代独立组件。用于构建基于信号的输入/输出、OnPush变更检测、宿主绑定、内容投射和生命周期钩子的UI组件。触发场景包括创建新组件、重构基于类的输入为信号、添加宿主绑定或实现可访问的交互式组件。

能力

• 使用 signal-based inputs/outputs 创建独立组件
• 应用 OnPush 变更检测策略
• 添加 宿主绑定 来样式化类、属性和事件
• 使用 <ng-content> 实现 内容投射
• 实现必要的 生命周期钩子（ngOnInit、ngOnDestroy 等）
• 将基于 @Input() / @Output() 装饰器的类输入重构为 信号
• 确保 可访问性（ARIA属性、键盘导航、焦点管理）

使用方法

示例：创建一个带有信号输入和输出（$）的新可访问按钮组件：

import { Component, input, output, signal } from '@angular/core';

@Component({
  selector: 'app-accessible-button',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <button
      [disabled]="disabled()"
      (click)="onClick.emit()"
      (keydown.enter)="onClick.emit()"
      (keydown.space)="onClick.emit(); $event.preventDefault()"
      [attr.aria-label]="ariaLabel()"
      class="btn"
    >
      <ng-content></ng-content>
    </button>
  `,
  styles: [
    `
      .btn { /* 内联样式 */ }
    `
  ],
  host: {
    '[class.disabled]': 'disabled()'
  }
})
export class AccessibleButtonComponent {
  readonly label = input<string>('按钮');
  readonly disabled = input<boolean>(false);
  readonly ariaLabel = input<string>('');
  readonly onClick = output<void>();
}

提示与最佳实践

• 对新组件始终使用 standalone: true
• 使用 input() 和 output() 函数替换旧的装饰器
• 在 host 属性中进行宿主绑定（而非在元数据中使用对象字面量）
• 对于交互式组件，添加键盘支持和ARIA属性以确保无障碍访问
• 将变更检测设置为 OnPush 以提升性能

适用平台

• Claude Code
• Cursor
• Codex
• 其他兼容的AI代理