Angular 现代开发专家

技能概述

Angular 技能助手专注于 Angular 20+ 现代开发模式，帮助你掌握 Signals、Standalone Components、Zoneless、SSR/Hydration 等最新特性，提升组件架构设计和应用性能。

适用场景

1. 新建 Angular 项目或升级现有项目

当你开始一个全新的 Angular 应用，或者需要将现有项目升级到 Angular 20+ 时，这个技能可以帮你：

• 采用最新的 Signals 响应式模式替代传统变更检测
• 使用 Standalone Components 简化项目结构
• 配置 Zoneless 模式提升运行性能
• 设置 SSR 和增量水合改善首屏加载

2. 组件架构与状态管理设计

当你需要设计可复用的组件架构或管理复杂应用状态时：

• 使用 Signal-based inputs/outputs 实现组件通信
• 用 Component Store 模式管理局部状态
• 利用 Content Projection 和 Host Directives 提高组件复用性
• 选择合适的状态管理方案（Signals vs RxJS）

3. 性能优化与现代化迁移

当你需要优化 Angular 应用性能或迁移到现代模式时：

• 配置 OnPush 变更检测策略
• 使用 @defer 块实现组件懒加载
• 启用 NgOptimizedImage 优化图片加载
• 从 NgModule 逐步迁移到 Standalone
• 从传统 DI 模式迁移到 inject() 函数

核心功能

1. Signals 响应式编程

Signals 是 Angular 的细粒度响应式系统，用于替代 zone.js 变更检测。技能助手可以帮你：

• 编写 signal、computed、effect 代码
• 实现 Signal-based 组件输入输出
• 使用 viewChild/viewChildren 的 Signal 版本
• 判断何时使用 Signals vs RxJS

2. Standalone Components 与路由

Standalone Components 让组件自包含，无需 NgModule 声明。技能助手可以帮你：

• 创建独立的 Standalone 组件
• 配置无 NgModule 的应用启动
• 实现组件级懒加载
• 编写函数式路由守卫和数据解析器

3. SSR/Hydration 与性能优化

服务器端渲染和水合可以显著改善首屏性能。技能助手可以帮你：

• 配置 Angular Universal SSR
• 启用客户端水合和事件重放
• 实现增量水合触发器
• 优化图片加载和代码分割

常见问题

Angular Signals 和 RxJS 应该怎么选择？

Signals 和 RxJS 各有适用场景：

使用 Signals 的场景：

• 本地组件状态管理
• 可派生的计算值（computed）
• 简单的副作用处理（effect）

使用 RxJS 的场景：

• HTTP 请求（HttpClient 返回 Observable）
• 事件流处理（fromEvent）
• 复杂的异步流程控制（switchMap、mergeMap）

大多数现代 Angular 应用会同时使用两者：Signals 处理组件状态，RxJS 处理异步数据流。

什么时候应该启用 Angular Zoneless 模式？

Zoneless 模式适合以下情况：

• 新建项目：从零开始的项目可以大胆启用
• 已大量使用 Signals：应用主要依赖 Signals 进行状态管理
• 需要极致性能：如移动端或嵌入式设备

不推荐启用的场景：

• 依赖大量第三方库且不兼容 Signals
• 团队对现代 Angular 模式不熟悉
• 没有足够的测试覆盖

启用 Zoneless 前务必在开发环境充分测试，确保所有状态变更都能正确触发 UI 更新。

如何从 Angular NgModule 迁移到 Standalone Components？

迁移可以渐进式进行，不需要一次性重构：

1. 先转换新组件：新开发的组件直接写成 Standalone
2. 逐步转换旧组件：按依赖顺序从叶子组件开始转换
3. 更新路由配置：使用 loadComponent 替代 loadChildren
4. 移除 NgModule：最后删除不再需要的 NgModule 文件

转换单个组件的步骤：

• 添加 standalone: true 装饰器属性
• 将 @NgModule 的 imports 移到组件的 imports 数组
• 删除 NgModule 的 declarations 数组引用

注意：迁移过程中 Standalone 和 NgModule 组件可以共存，不必担心破坏现有功能。