企业官网建设流程全解析

• AI 技能
• AI 插件

导读

本指南以开源仓库agentic-awesome-skills中的 angular-state-management 技能文档 及其 详细参考指南 为骨架，系统讲解现代 Angular 状态管理的六大状态类别、四套主流方案（Signal Service、NgRx SignalStore、NgRx Store、RxJS ComponentStore）的选型标准与完整实现，并覆盖从BehaviorSubject到 Signals 的迁移路径与双向桥接技巧。读完本文，你将掌握一套可直接落地的状态管理决策框架，以及可在真实项目中复制运行的 TypeScript 代码模板。

说明：本仓库同时维护了 Claude 专用副本（plugins/agentic-awesome-skills-claude/skills/angular-state-management），两份 SKILL.md 与 detailed-guide.md 内容完全一致，文中引用的代码均来自这两份文档。

一、六大状态类别：先分类，再选型

Angular 应用中的状态并非铁板一块。官方技能文档首先将状态按作用域与来源划分为六类，每类对应一套最合适的技术方案：

分类的核心逻辑在于：状态的作用域越小，使用的机制越轻量。组件内部的临时开关用signal()即可；跨页面共享的复杂领域状态才值得引入 NgRx 这类重型方案；服务端数据与路由参数本质上是"外部输入"，应当与本地派生状态区分对待。

选型决策树

文档给出了一条经验法则，按应用规模自小向大递进：

小型应用、状态简单 → Signal Services 中型应用、状态适中 → Component Stores 大型应用、状态复杂 → NgRx Store 重度服务端交互 → NgRx Query + Signal Services 实时更新场景 → RxAngular + Signals

这条决策路径与文档中 When to Use Each Pattern 的说明互为印证：Signal Service 适合共享 UI 状态（主题、用户偏好），SignalStore 适合带派生计算的特征状态，NgRx Store 适合跨特征复杂依赖，ComponentStore 适合组件级异步操作，Reactive Forms 专门负责带校验的表单状态。

二、Signal 时代：从零搭建响应式状态

Angular 16 引入 Signals 后，本地与共享状态管理被大幅简化。文档提供了三个递进层级的模式。

模式一：极简 Signal Service（共享 UI 状态）

这是最轻量的共享状态方案，典型场景是主题切换、用户偏好等全局 UI 状态：

// services/counter.service.ts import { Injectable, signal, computed } from "@angular/core"; @Injectable({ providedIn: "root" }) export class CounterService { // 私有可写 signal private _count = signal(0); // 对外只读暴露 + 派生计算 readonly count = this._count.asReadonly(); readonly doubled = computed(() => this._count() * 2); readonly isPositive = computed(() => this._count() > 0); increment() { this._count.update((v) => v + 1); } decrement() { this._count.update((v) => v - 1); } reset() { this._count.set(0); } } // 组件中使用 @Component({ template: ` <p>Count: {{ counter.count() }}</p> <p>Doubled: {{ counter.doubled() }}</p> <button (click)="counter.increment()">+</button> `, }) export class CounterComponent { counter = inject(CounterService); }

关键设计要点：

• 封装可写源：内部用private _count持有可写信号，对外仅暴露asReadonly()，从源头杜绝外部直接篡改状态；
• 派生状态用computed()：doubled、isPositive由_count自动推导，具备记忆化（memoized）特性，源信号变化时自动重算；
• 修改统一走方法：increment/decrement/reset封装set/update，保证状态变更路径可控；
• 依赖注入用inject()：相比构造函数注入，inject()更简洁且可工作在工厂函数中。

模式二：Feature Signal Store（异步加载 + 派生选择器）

当共享状态涉及异步数据（如用户信息）时，升级为带 loading/error 三要素的状态模型：

// stores/user.store.ts import { Injectable, signal, computed, inject } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { toSignal } from "@angular/core/rxjs-interop"; interface User { id: string; name: string; email: string; } interface UserState { user: User | null; loading: boolean; error: string | null; } @Injectable({ providedIn: "root" }) export class UserStore { private http = inject(HttpClient); // 状态信号 private _user = signal<User | null>(null); private _loading = signal(false); private _error = signal<string | null>(null); // 选择器（只读 computed） readonly user = computed(() => this._user()); readonly loading = computed(() => this._loading()); readonly error = computed(() => this._error()); readonly isAuthenticated = computed(() => this._user() !== null); readonly displayName = computed(() => this._user()?.name ?? "Guest"); // 动作 async loadUser(id: string) { this._loading.set(true); this._error.set(null); try { const user = await fetch(`/api/users/${id}`).then((r) => r.json()); this._user.set(user); } catch (e) { this._error.set("Failed to load user"); } finally { this._loading.set(false); } } updateUser(updates: Partial<User>) { this._user.update((user) => (user ? { ...user, ...updates } : null)); } logout() { this._user.set(null); this._error.set(null); } }

这一模式把异步流程的状态机（loading → success / error）显式建模为信号，isAuthenticated、displayName这类派生值全部由computed()收敛，避免在组件里散落多处判断逻辑。

模式三：NgRx SignalStore（官方信号版 Store）

NgRx 官方提供的signalStore是对纯信号方案的工程化封装，通过withState / withComputed / withMethods三个组合器结构化组织状态、派生值与动作：

// stores/products.store.ts import { signalStore, withState, withMethods, withComputed, patchState, } from "@ngrx/signals"; import { inject } from "@angular/core"; import { ProductService } from "./product.service"; interface ProductState { products: Product[]; loading: boolean; filter: string; } const initialState: ProductState = { products: [], loading: false, filter: "", }; export const ProductStore = signalStore( { providedIn: "root" }, withState(initialState), withComputed((store) => ({ filteredProducts: computed(() => { const filter = store.filter().toLowerCase(); return store .products() .filter((p) => p.name.toLowerCase().includes(filter)); }), totalCount: computed(() => store.products().length), })), withMethods((store, productService = inject(ProductService)) => ({ async loadProducts() { patchState(store, { loading: true }); try { const products = await productService.getAll(); patchState(store, { products, loading: false }); } catch { patchState(store, { loading: false }); } }, setFilter(filter: string) { patchState(store, { filter }); }, addProduct(product: Product) { patchState(store, ({ products }) => ({ products: [...products, product], })); }, })), );

组件侧配合 Angular 17+ 的新控制流语法，模板可直接消费 store 的响应式状态：

// 使用示例 @Component({ template: ` <input (input)="store.setFilter($event.target.value)" /> @if (store.loading()) { <app-spinner /> } @else { @for (product of store.filteredProducts(); track product.id) { <app-product-card [product]="product" /> } } `, }) export class ProductListComponent { store = inject(ProductStore); ngOnInit() { this.store.loadProducts(); } }

需要注意的细节：patchState既支持传入部分状态对象，也支持传入基于当前状态的回调（如addProduct中的函数式更新），后者适合依赖旧值的追加操作；@for中的track表达式可显著优化列表重渲染性能。

三、NgRx Store：企业级全局状态管理

当应用达到大型规模、存在复杂的跨特征依赖时，文档推荐使用完整的 NgRx Store（Action + Reducer + Selector + Effect）。

应用级初始化

// store/app.state.ts import { ActionReducerMap } from "@ngrx/store"; export interface AppState { user: UserState; cart: CartState; } export const reducers: ActionReducerMap<AppState> = { user: userReducer, cart: cartReducer, }; // main.ts（standalone 引导方式） bootstrapApplication(AppComponent, { providers: [ provideStore(reducers), provideEffects([UserEffects, CartEffects]), provideStoreDevtools({ maxAge: 25 }), ], });

maxAge: 25表示 DevTools 中最多保留 25 步历史状态，便于时间旅行调试；provideEffects注册副作用，provideStore注册根 reducer 映射。

Feature Slice 模式：Action 组

createActionGroup将同一来源的多个事件组织在一起，减少样板代码：

// store/user/user.actions.ts import { createActionGroup, props, emptyProps } from "@ngrx/store"; export const UserActions = createActionGroup({ source: "User", events: { "Load User": props<{ userId: string }>(), "Load User Success": props<{ user: User }>(), "Load User Failure": props<{ error: string }>(), "Update User": props<{ updates: Partial<User> }>(), Logout: emptyProps(), }, });

Feature Slice 模式：Reducer

Reducer 保持纯函数特性，仅根据 Action 返回新状态：

// store/user/user.reducer.ts import { createReducer, on } from "@ngrx/store"; import { UserActions } from "./user.actions"; export interface UserState { user: User | null; loading: boolean; error: string | null; } const initialState: UserState = { user: null, loading: false, error: null, }; export const userReducer = createReducer( initialState, on(UserActions.loadUser, (state) => ({ ...state, loading: true, error: null, })), on(UserActions.loadUserSuccess, (state, { user }) => ({ ...state, user, loading: false, })), on(UserActions.loadUserFailure, (state, { error }) => ({ ...state, loading: false, error, })), on(UserActions.logout, () => initialState), );

Feature Slice 模式：Selector

Selector 负责从全局状态树中切片并做派生，配合selectSignal可在模板中直接以信号方式消费：

// store/user/user.selectors.ts import { createFeatureSelector, createSelector } from "@ngrx/store"; import { UserState } from "./user.reducer"; export const selectUserState = createFeatureSelector<UserState>("user"); export const selectUser = createSelector( selectUserState, (state) => state.user, ); export const selectUserLoading = createSelector( selectUserState, (state) => state.loading, ); export const selectIsAuthenticated = createSelector( selectUser, (user) => user !== null, );

Feature Slice 模式：Effect

Effect 将副作用（网络请求）与 reducer 解耦，ofType过滤特定 Action，switchMap保证请求的响应顺序：

// store/user/user.effects.ts import { Injectable, inject } from "@angular/core"; import { Actions, createEffect, ofType } from "@ngrx/effects"; import { switchMap, map, catchError, of } from "rxjs"; @Injectable() export class UserEffects { private actions$ = inject(Actions); private userService = inject(UserService); loadUser$ = createEffect(() => this.actions$.pipe( ofType(UserActions.loadUser), switchMap(({ userId }) => this.userService.getUser(userId).pipe( map((user) => UserActions.loadUserSuccess({ user })), catchError((error) => of(UserActions.loadUserFailure({ error: error.message })), ), ), ), ), ); }

组件消费：Store + selectSignal

@Component({ template: ` @if (loading()) { <app-spinner /> } @else if (user(); as user) { <h1>Welcome, {{ user.name }}</h1> <button (click)="logout()">Logout</button> } `, }) export class HeaderComponent { private store = inject(Store); user = this.store.selectSignal(selectUser); loading = this.store.selectSignal(selectUserLoading); logout() { this.store.dispatch(UserActions.logout()); } }

selectSignal是 NgRx 为 Signal 生态提供的桥接 API，它把 Store 的响应式能力直接暴露为信号，模板中的@else if (user(); as user)别名语法（Angular 17+）进一步简化了可空值的展示逻辑。

四、RxJS ComponentStore：组件级异步状态

对于作用域局限于单个组件（或组件树）的异步状态，NgRx 的ComponentStore提供了比完整 Store 更轻的替代方案，其select / updater / effect三件套与信号版 SignalStore 在概念上一一对应：

// stores/todo.store.ts import { Injectable } from "@angular/core"; import { ComponentStore } from "@ngrx/component-store"; import { switchMap, tap, catchError, EMPTY } from "rxjs"; interface TodoState { todos: Todo[]; loading: boolean; } @Injectable() export class TodoStore extends ComponentStore<TodoState> { constructor(private todoService: TodoService) { super({ todos: [], loading: false }); } // 选择器（支持多个流联合派生） readonly todos$ = this.select((state) => state.todos); readonly loading$ = this.select((state) => state.loading); readonly completedCount$ = this.select( this.todos$, (todos) => todos.filter((t) => t.completed).length, ); // Updater：同步修改状态 readonly addTodo = this.updater((state, todo: Todo) => ({ ...state, todos: [...state.todos, todo], })); readonly toggleTodo = this.updater((state, id: string) => ({ ...state, todos: state.todos.map((t) => t.id === id ? { ...t, completed: !t.completed } : t, ), })); // Effect：异步副作用 readonly loadTodos = this.effect<void>((trigger$) => trigger$.pipe( tap(() => this.patchState({ loading: true })), switchMap(() => this.todoService.getAll().pipe( tap({ next: (todos) => this.patchState({ todos, loading: false }), error: () => this.patchState({ loading: false }), }), catchError(() => EMPTY), ), ), ), ); }

要点解析：select支持多输入流组合派生（如completedCount$依赖todos$）；updater以不可变方式产生新状态；effect内部必须使用 RxJS 高阶操作符（如switchMap）处理异步流，并以catchError(() => EMPTY)终止错误传播链，避免错误泄漏到订阅端。

五、服务端状态：HTTP + Signals 与乐观更新

统一 API 状态模型

服务端状态管理的第一要务是统一 data/loading/error 三要素。文档给出了一种把 HttpClient 与 Signal 结合的封装：

// services/api.service.ts import { Injectable, signal, inject } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { firstValueFrom } from "rxjs"; interface ApiState<T> { data: T | null; loading: boolean; error: string | null; } @Injectable({ providedIn: "root" }) export class ProductApiService { private http = inject(HttpClient); private _state = signal<ApiState<Product[]>>({ data: null, loading: false, error: null, }); readonly products = computed(() => this._state().data ?? []); readonly loading = computed(() => this._state().loading); readonly error = computed(() => this._state().error); async fetchProducts(): Promise<void> { this._state.update((s) => ({ ...s, loading: true, error: null })); try { const data = await firstValueFrom( this.http.get<Product[]>("/api/products"), ); this._state.update((s) => ({ ...s, data, loading: false })); } catch (e) { this._state.update((s) => ({ ...s, loading: false, error: "Failed to fetch products", })); } } }

firstValueFrom将 RxJS Observable 转为 Promise，使信号 + async/await 的组合保持代码线性；computed(() => this._state().data ?? [])为消费方提供安全的空值兜底。

乐观更新与回滚

乐观更新（Optimistic Update）是服务端状态的核心进阶技巧：先更新 UI，请求失败再回滚。文档给出了标准实现：

// 乐观更新 async deleteProduct(id: string): Promise<void> { const previousData = this._state().data; // 先乐观地移除 this._state.update((s) => ({ ...s, data: s.data?.filter((p) => p.id !== id) ?? null, })); try { await firstValueFrom(this.http.delete(`/api/products/${id}`)); } catch { // 失败回滚 this._state.update((s) => ({ ...s, data: previousData })); } }

实现关键：在发起请求之前先保存previousData快照，请求失败时用快照整体还原。这一模式让界面响应感知接近零延迟，同时保证数据一致性。

六、最佳实践：Do's 与 Don'ts

文档将多年实践经验浓缩为两张清单，可直接作为团队代码评审的标准：

应该做（Do's）

不应该做（Don'ts）

七、迁移路径：从 BehaviorSubject 到 Signals

逐行对比迁移

文档给出了 RxJS 时代最常见的BehaviorSubject服务迁移到 Signal 服务的对照：

// 迁移前：基于 RxJS @Injectable({ providedIn: "root" }) export class OldUserService { private userSubject = new BehaviorSubject<User | null>(null); user$ = this.userSubject.asObservable(); setUser(user: User) { this.userSubject.next(user); } } // 迁移后：基于 Signal @Injectable({ providedIn: "root" }) export class UserService { private _user = signal<User | null>(null); readonly user = this._user.asReadonly(); setUser(user: User) { this._user.set(user); } }

对应关系清晰：BehaviorSubject→signal()，.asObservable()→.asReadonly()，.next(value)→.set(value)。迁移后消费方从subscribe改为模板直接调用user()，并自动获得computed()派生能力。

双向桥接：toSignal 与 toObservable

Angular 提供了@angular/core/rxjs-interop中的两个函数，实现两个响应式世界之间的互操作：

import { toSignal, toObservable } from '@angular/core/rxjs-interop'; // Observable → Signal @Component({...}) export class ExampleComponent { private route = inject(ActivatedRoute); // 将路由参数流转换为信号，提供初始值 userId = toSignal( this.route.params.pipe(map(p => p['id'])), { initialValue: '' } ); } // Signal → Observable export class DataService { private filter = signal(''); // 将信号转换为 Observable，以便接入 RxJS 操作符链 filter$ = toObservable(this.filter); filteredData$ = this.filter$.pipe( debounceTime(300), switchMap(filter => this.http.get(`/api/data?q=${filter}`)) ); }

使用建议：

• Observable → Signal：用于把路由参数、定时器、事件流等外部可观察源变成信号，initialValue参数可避免空值闪烁；
• Signal → Observable：用于把信号接入需要 RxJS 操作符的场景，如debounceTime防抖搜索、switchMap请求切换等；
• 原则：选定一个主范式，桥接只发生在边界，不要在业务代码中随意来回切换。

八、仓库中的配套资源与使用方式

本技能在仓库中按标准技能结构组织，可直接查阅或作为 Agent 技能加载：

• SKILL.md 主文件：定义技能的激活条件、适用/不适用场景与安全约束（risk: safe、source: self，添加日期 2026-02-27）；
• 详细指南 detailed-guide.md：本文全部代码与决策框架的原始出处，含完整操作流程与参考材料；
• README.md：技能结构与各模式适用场景速览；
• metadata.json：技能元数据（版本 1.0.0、组织 Agentic Awesome Skills、摘要与外部参考链接）。

该技能在仓库的data目录索引中亦被收录（如 skill-content-index.v1.json），说明其已纳入 Agentic Awesome Skills 的目录与检索体系，可直接被 Agent 在本地发现与加载。技能文件同时提供 Claude 专用副本（plugins/agentic-awesome-skills-claude/skills/angular-state-management），内容经核对与主副本完全一致。

技能使用边界

• 仅在与 Angular 状态管理明确匹配的任务中使用本技能（如搭建全局状态、选择 Signals/NgRx/Akita、实现组件级 store、做乐观更新、调试状态问题、迁移遗留模式）；
• 任务与 Angular 状态管理无关时不使用；涉及 React 状态管理时，文档明确指引改用仓库中的react-state-management技能；
• 技能输出不能替代环境特定的验证、测试与专家评审，缺少必要输入、权限或成功标准时应停下并请求澄清。

结语

从轻量的 Signal Service 到企业级的 NgRx Store，再到 RxJS ComponentStore 与乐观更新，Angular 状态管理的核心不是"选哪个框架"，而是先对状态分类，再按规模匹配方案。本文完整继承了 detailed-guide.md 的决策框架、六套可运行代码模板、最佳实践清单与迁移桥接技巧，并结合仓库的技能组织方式给出了可追溯的原始出处。当你下一次面对 Angular 状态问题时，直接按"本地用 signal → 共享用 Service → 特征用 SignalStore → 全局复杂用 NgRx → 组件异步用 ComponentStore"的路径决策，即可避免 90% 的状态管理混乱。

• AI 技能
• AI 插件