angular-state-management
實作 Angular 狀態管理
Angular 狀態管理有多種解決方案，相當複雜。此技能提供 Signals、NgRx、Component Stores 和 RxJS 模式的決策框架與實作模式，協助您建置可維護的應用程式。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「angular-state-management」。 何時應該使用 Signals 或 NgRx Store？
預期結果:
- 使用 Signals 當：簡單的本地狀態、少數元件間的共享狀態、計算衍生值、需要輕量級解決方案
- 使用 NgRx Store 當：複雜的跨功能相依性、需要時間旅行偵錯、需要嚴格的單向資料流、大型團隊協作
正在使用「angular-state-management」。 建立一個使用 Signals 的使用者狀態服務
預期結果:
- 服務包含：private writable signals、使用 asReadonly() 的 readonly public signals、用於衍生狀態的 computed 值、用於狀態更新的方法
安全審計
安全Static analysis flagged 70 potential issues. Manual review confirms all findings are false positives. The 'Ruby/shell backtick execution' findings are triggered by markdown code fences and TypeScript template literals. 'Weak cryptographic algorithm' is triggered by words like 'sha' in 'shared' and 'source'. Network-related findings are legitimate documentation URLs and code examples. This is a genuine Angular state management documentation skill with no security concerns.
品質評分
你能建構什麼
選擇合適的狀態解決方案
獲得關於何時使用 Signals 處理簡單狀態、Component Store 處理功能範圍狀態，或 NgRx Store 處理具有複雜流程的企業應用程式的指引。
實作現代 Signal 模式
學習建立包含計算值、從 Observables 轉換的 toSignal，以及適當不可變性模式的 Signal-based 服務。
設定 NgRx SignalStore
使用 withState、withMethods、withComputed 設定 NgRx SignalStore，實作無需樣板程式碼的型別安全功能狀態管理。
試試這些提示
我有一個 Angular 應用程式，用於 [描述您的使用案例]。我應該使用 Signals、Component Store 還是 NgRx？哪些因素應該影響我的決定？
建立一個用於管理 [描述狀態] 的 Signal-based 服務。包含 writable signals、computed 值，以及更新狀態的方法。
為 [描述功能] 設定 NgRx Store。包含使用 createActionGroup 的 actions、reducer、selectors，以及用於非同步操作的 effects。
將此 RxJS BehaviorSubject 服務轉換為現代 Angular Signals。展示遷移前後的模式，包含適當的反應性。
最佳實務
- 優先在新的 Angular 應用程式中使用 Signals - 這是推薦的現代方法
- 對所有衍生狀態使用 computed() 以確保自動更新
- 將狀態與使用它的功能放在一起，而非使用全域狀態
- 當您需要時間旅行偵錯、嚴格模式或企業協作時使用 NgRx
避免
- 避免直接變更 signals - 始終使用 set() 或 update() 方法
- 不要過度全域化狀態 - 盡可能保持本地狀態以降低複雜度
- 避免在沒有清楚橋接模式的情況下混合使用 RxJS 和 Signals
- 不要在元件中 subscribe 以取得狀態 - 直接在範本中使用 signals