angular

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？

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

先转换新组件：新开发的组件直接写成 Standalone

逐步转换旧组件：按依赖顺序从叶子组件开始转换

更新路由配置：使用 loadComponent 替代 loadChildren

移除 NgModule：最后删除不再需要的 NgModule 文件

转换单个组件的步骤：

添加 standalone: true 装饰器属性

将 @NgModule 的 imports 移到组件的 imports 数组

删除 NgModule 的 declarations 数组引用

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