AI 技能AI 插件【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,115 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/gh_mirrors/an/agentic-awesome-skills点击查看免费下载导读本指南以开源仓库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 应用中的状态并非铁板一块。官方技能文档首先将状态按作用域与来源划分为六类每类对应一套最合适的技术方案类型描述推荐方案Local State本地状态组件内部、纯 UI 状态Signals、signal()Shared State共享状态多个相关组件间共享Signal ServicesGlobal State全局状态应用级、逻辑复杂NgRx、Akita、ElfServer State服务端状态远程数据与缓存NgRx Query、RxAngularURL State路由状态路由参数ActivatedRouteForm State表单状态输入值与校验Reactive Forms分类的核心逻辑在于状态的作用域越小使用的机制越轻量。组件内部的临时开关用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: pCount: {{ counter.count() }}/p pDoubled: {{ 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 signalUser | null(null); private _loading signal(false); private _error signalstring | 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: PartialUser) { 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官方信号版 StoreNgRx 官方提供的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 StoreAction Reducer Selector Effect。应用级初始化// store/app.state.ts import { ActionReducerMap } from ngrx/store; export interface AppState { user: UserState; cart: CartState; } export const reducers: ActionReducerMapAppState { user: userReducer, cart: cartReducer, }; // main.tsstandalone 引导方式 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: PartialUser }(), Logout: emptyProps(), }, });Feature Slice 模式ReducerReducer 保持纯函数特性仅根据 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 模式SelectorSelector 负责从全局状态树中切片并做派生配合selectSignal可在模板中直接以信号方式消费// store/user/user.selectors.ts import { createFeatureSelector, createSelector } from ngrx/store; import { UserState } from ./user.reducer; export const selectUserState createFeatureSelectorUserState(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 模式EffectEffect 将副作用网络请求与 reducer 解耦ofType过滤特定 ActionswitchMap保证请求的响应顺序// 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 selectSignalComponent({ template: if (loading()) { app-spinner / } else if (user(); as user) { h1Welcome, {{ 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 ComponentStoreTodoState { 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.effectvoid((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 ApiStateT { data: T | null; loading: boolean; error: string | null; } Injectable({ providedIn: root }) export class ProductApiService { private http inject(HttpClient); private _state signalApiStateProduct[]({ 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(): Promisevoid { this._state.update((s) ({ ...s, loading: true, error: null })); try { const data await firstValueFrom( this.http.getProduct[](/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): Promisevoid { 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快照请求失败时用快照整体还原。这一模式让界面响应感知接近零延迟同时保证数据一致性。六、最佳实践Dos 与 Donts文档将多年实践经验浓缩为两张清单可直接作为团队代码评审的标准应该做Dos实践原因本地状态使用 Signals简单、响应式、无需手动订阅管理派生数据使用computed()自动更新、记忆化缓存状态与所属特征就近放置colocate便于维护与删除复杂流程使用 NgRx获得 Actions、Effects、DevTools 生态优先inject()而非构造函数注入更简洁且能在工厂函数中工作不应该做Donts反模式正确做法存储派生数据用computed()动态计算直接修改信号内部值统一走set()/update()过度全局化状态能本地化就本地化混沌地混用 RxJS 与 Signals选定主方案用toSignal/toObservable桥接在组件中为状态手动订阅模板中直接消费信号七、迁移路径从 BehaviorSubject 到 Signals逐行对比迁移文档给出了 RxJS 时代最常见的BehaviorSubject服务迁移到 Signal 服务的对照// 迁移前基于 RxJS Injectable({ providedIn: root }) export class OldUserService { private userSubject new BehaviorSubjectUser | null(null); user$ this.userSubject.asObservable(); setUser(user: User) { this.userSubject.next(user); } } // 迁移后基于 Signal Injectable({ providedIn: root }) export class UserService { private _user signalUser | 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 与 toObservableAngular 提供了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 插件【免费下载链接】agentic-awesome-skillsAAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,115 agentic skills. Includes CLI, local MCP, catalog, plugins, and Workbench.项目地址https://gitcode.com/gh_mirrors/an/agentic-awesome-skills点击查看免费下载相关推荐Angular状态管理架构awesome-angular NgRx最佳实践Angular状态管理架构awesome angular NgRx最佳实践 你是否还在为Angular应用中复杂的状态管理而烦恼组件间数据共享困难、状态变更文档Apache Airflow DAG 模式实战指南基于 agentic-awesome-skills 的技能化实现Apache Airflow DAG 模式实战指南基于 agentic awesome skills 的技能化实现 Apache Airflow 是业界最主流AI 技能AI 插件A2UI Angular Renderer 深度实战基于 Angular Signals 的动态 UI 渲染与协议集成指南A2UI Angular Renderer 深度实战基于 Angular Signals 的动态 UI 渲染与协议集成指南 导读 A2UI Angular R人工智能AI AgentAI 应用前端UI组件上一篇Harmony项目中的前缀补丁(Prefix Patching)技术详解下一篇Phoenix项目中的推理概念与模式详解创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考