用途:该技能用于指导构建 Angular 独立组件(Standalone Components),覆盖组件结构、状态管理与变更检测等实践,适用于编写或重构 Angular 组件时参考。
主要能力与规范: 结构方面,要求使用 standalone: true,所有依赖放入 imports 数组,不使用 NgModule(Angular 20+ 中 standalone 为默认)。组件按 Smart/Dumb 拆分:Smart(容器)注入服务并管理状态;Presentational(Dumb)只接收输入并通过 outputs 发出事件,不依赖服务。宿主绑定写在 @Component 的 host: { } 中,例如 '[class.active]': 'isActive()',不使用 @HostBinding/@HostListener。视图封装默认 Emulated,谨慎使用 None。
Signals 与变更检测:始终使用 ChangeDetectionStrategy.OnPush。输入用 input.required<T>() 或 input<T>(),而非 @Input(),以函数形式访问如 {{ userId() }},可配合 booleanAttribute/numberAttribute 转换。输出用 output<T>()(v17.3+),而非 @Output() EventEmitter;双向绑定用 model()。状态用 signal() 存本地、computed() 派生、effect() 仅处理副作用。清理用 toSignal()(自动取消订阅)、takeUntilDestroyed() 或 DestroyRef,禁止无清理的 subscribe()。
控制流:使用 @if (condition)、@for (item of items; track item.id)、@switch、@empty { } 替代 *ngIf/*ngFor(Angular 17+ 新语法)。
反模式:不用默认变更检测(仅 OnPush);模板中不调用函数(如 {{ calculate() }}),改用 computed();不手动 subscribe,用 async 管道或 toSignal();不直接修改 ElementRef,改用指令或 Renderer2;不用类继承,改用指令与服务组合。
限制:资料未提供具体安装命令、版本兼容细节或完整代码示例,实际使用需结合项目 Angular 版本核对。