angular

# Angular 专家 掌握现代 Angular 开发，包括 Signals、独立组件、Zoneless 应用、SSR/注水以及最新的响应式模式。 ## 何时使用此技能 - 构建新的 Angular 应用 (v20+) - 实现基于 Signals 的响应式模式 - 创建独立组件并从 NgModules 迁移 - 配置 Zoneless Angular 应用 - 实现 SSR、预渲染和注水 - 优化 Angular 性能 - 采用现代 Angular 模式和最佳实践 ## 何时不使用此技能 - 从 AngularJS (1.x) 迁移 → 使用 `angular-migration` 技能 - 处理无法升级的旧版 Angular 应用 - 一般 TypeScript 问题 → 使用 `typescript-expert` 技能 ## 指令 1. 评估 Angular 版本和项目结构 2. 应用现代模式（Signals, Standalone, Zoneless） 3. 使用正确的类型和响应式实现 4. 通过构建和测试进行验证 ## 安全性 - 在生产环境之前，务必在开发环境中测试更改 - 对现有应用进行渐进式迁移（不要进行大规模重构） - 在过渡期间保持向后兼容性 --- ## Angular 版本时间轴 | 版本 | 发布时间 | 关键特性 | | -------------- | ------- | ------------------------------------------------------ | | **Angular 20** | 2025 Q2 | Signals 稳定，Zoneless 稳定，增量注水 | | **Angular 21** | 2025 Q4 | Signals 优先默认，增强型 SSR | | **Angular 22** | 2026 Q2 | Signal 表单，无选择器组件 | --- ## 1. Signals：新的响应式原语 Signals 是 Angular 的细粒度响应式系统，取代了基于 zone.js 的变更检测。 ### 核心概念 typescript import { signal, computed, effect } from "@angular/core"; // 可写 Signal const count = signal(0); // 读取值 console.log(count()); // 0 // 更新值 count.set(5); // 直接设置 count.update((v) => v + 1); // 函数式更新 // 计算（派生）Signal const doubled = computed(() => count() * 2); // Effect（副作用） effect(() => { console.log(`Count changed to: ${count()}`); }); ### 基于 Signal 的输入和输出 typescript import { Component, input, output, model } from "@angular/core"; @Component({ selector: "app-user-card", standalone: true, template: `