mcpField
A
angular-components

angular-components

github.com/oguzhan18开发7182 次安装31 周前更新
代码仓库

关于 angular-components

面向 Angular 应用开发者的组件设计参考，涵盖独立组件、基于 signal 的输入与输出、模板、变更检测、封装和宿主绑定。

主要功能

  1. 01创建独立组件
  2. 02使用基于 signal 的输入与输出
  3. 03配置模板和内容投影
  4. 04设置变更检测与封装
  5. 05绑定宿主属性和事件

适用场景

  1. 01构建可复用的独立组件
  2. 02定义组件输入和事件输出
  3. 03配置渲染与组件样式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-components

安装后在 Claude Code 中输入/angular-components确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

Angular 组件

版本： Angular 21（2025） 标签： 组件、@Component、架构

参考： 组件指南 • @Component API

最佳实践

  • 创建独立组件
@Component({
  standalone: true,
  selector: 'app-my',
  imports: [CommonModule],
  template: `<p>Content</p>`
})
export class MyComponent {}
  • 使用信号输入
@Component({})
export class MyComponent {
  data = input<string>('');
  required = input.required<User>();
  
  computed = computed(() => this.data()?.name);
}
  • 使用输出处理事件
@Component({})
export class MyComponent {
  data = output<string>();
  
  onClick() {
    this.data.emit('event');
  }
}
  • 使用模板引用变量
@Component({
  template: `
    <input #nameInput>
    <button (click)="onSubmit(nameInput.value)">Submit</button>
  `
})
export class MyComponent {}
  • 使用内容投影
@Component({
  selector: 'app-card',
  template: `
    <div class="header">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="body">
      <ng-content></ng-content>
    </div>
  `
})
export class CardComponent {}
  • 使用变更检测策略
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OptimizedComponent {}
  • 使用封装
@Component({
  encapsulation: ViewEncapsulation.None // or Emulated, ShadowDom
})
export class StyledComponent {}
  • 使用宿主绑定
@Component({
  host: {
    '[class.active]': 'isActive',
    '(click)': 'onClick()'
  }
})
export class HostComponent {
  isActive = false;
}

评论

支持 Markdown