Angular Expert
使用 Signals 建構現代 Angular 應用程式
仍在為過時的 Angular 模式和複雜的 NgModules 所苦？此技能提供關於現代 Angular (v20+) 的專業指導，涵蓋 Signals、Standalone Components 和 Zoneless 架構。
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「Angular Expert」。 建立一個帶有 signal inputs 的使用者卡片元件
預期結果:
一個 Standalone UserCardComponent，使用 input() 處理 id、name 和 role 屬性（帶有預設值），使用 output() 處理 select 事件，並使用 computed signal 進行顯示格式化。
正在使用「Angular Expert」。 如何從 @Input() 遷移到 signal inputs？
預期結果:
將 @Input() 裝飾器替換為 input() 函式。對於必要 inputs 使用 input.required<T>()，對於選選性 inputs 使用 input<T>(defaultValue)。更新模板參考，將 signals 作為函式呼叫：使用 {{ name() }} 而非 {{ name }}。
安全審計
安全All static analysis findings were false positives. The skill contains documentation-only content (markdown and JSON configuration) with no executable code. URL references point to official Angular documentation. Markdown code formatting was incorrectly flagged as shell execution. No actual security risks detected.
品質評分
你能建構什麼
新 Angular 專案設定
取得關於從一開始就使用 Signals、Standalone Components 和最佳設定來啟動現代 Angular 應用程式的專業指導。
舊版 Angular 現代化
規劃並執行從 NgModules 到 Standalone Components 的漸進式遷移，逐步採用 Signals 和 Zoneless 模式。
效能優化
實作進階模式，如延遲載入、增量 hydration 和 OnPush 變更偵測，以達到最佳效能。
試試這些提示
建立一個新的 Angular 元件，使用 Signals 進行狀態管理。該元件應顯示一個計數器，帶有遞增和遞減按鈕，使用 signal inputs 設定初始值，使用 signal outputs 處理事件。
協助我將這個現有的基於 NgModule 的 Angular 元件轉換為 Standalone Component。更新所有 imports、移除模組依賴關係，並確保元件使用現代的 signal-based inputs 和 outputs。
指導我將現有的 Angular 應用程式轉換為 Zoneless 模式。解釋所需的設定變更、如何處理變更偵測觸發，以及在沒有 zone.js 的情況下用於非同步操作的模式。
為 Angular 應用程式設定帶有增量 hydration 的伺服器端渲染。設定具有適當觸發條件（on viewport、on interaction、on idle）的 defer blocks，以獲得最佳的 Core Web Vitals 分數。
最佳實務
- 使用 Signals 處理本機元件狀態，使用 RxJS 處理 HTTP 請求等非同步串流
- 啟用 OnPush 變更偵測，讓 Signals 自動觸發更新
- 優先使用 Standalone Components 搭配直接 imports，而非 SharedModules，以獲得更好的 tree-shaking 效果
避免
- 對於簡單的本地狀態使用 RxJS BehaviorSubject，而 Signals 已足夠
- 積極載入整個功能模組，而非使用 loadComponent 和 defer blocks
- 混合舊版裝飾器模式與 Signals，導致不一致的變更偵測