angular-20-standalone-component
建立 Angular 20 獨立元件
Angular 20 引入了重大的語法改進，提升了效能和開發者體驗。本技能幫助開發者使用 Signals、新的 input/output 函式以及現代控制流語法來建構生產就緒的獨立元件。
스킬 ZIP 다운로드
Claude에서 업로드
설정 → 기능 → 스킬 → 스킬 업로드로 이동
토글을 켜고 사용 시작
테스트해 보기
"angular-20-standalone-component" 사용 중입니다. Create an Angular 20 standalone component for displaying a product list with loading state
예상 결과:
- Component selector: app-product-list
- Uses signal() for products, loading, and error state
- Uses computed() for hasProducts derived state
- Implements inject() for ProductService
- Uses @if/@for control flow syntax
- OnPush change detection enabled
- Proper error handling with nz-alert
"angular-20-standalone-component" 사용 중입니다. Create a presentational button component with loading indicator
예상 결과:
- Standalone component with OnPush change detection
- input.required() for button properties
- output() for click events
- Loading state with @if control flow
- No service dependencies or business logic
보안 감사
안전This skill is a pure documentation resource containing only TypeScript code examples and instructional content for Angular 20 component patterns. Static scanner flagged 62 pattern matches as high-risk, but all are false positives: backticks in TypeScript function names (signal, computed, effect), GitHub URLs in metadata, and Angular terminology misidentified as C2/crypto keywords. No executable scripts, network calls, file system access, or code execution capabilities exist.
위험 요인
🌐 네트워크 접근 (1)
📁 파일 시스템 액세스 (1)
⚙️ 외부 명령어 (30)
품질 점수
만들 수 있는 것
新元件架構
根據專案標準和現代模式快速產生 Angular 20 元件
模式參考指南
參考正確的語法以將傳統 Angular 程式碼遷移至 Angular 20 模式
團隊標準執行
透過三層架構確保團隊程式碼庫中元件架構的一致性
이 프롬프트를 사용해 보세요
建立一個名為 UserCardComponent 的 Angular 20 獨立元件，使用 input() 接收使用者資料並使用 output() 來發送事件，以顯示使用者資訊。
建立一個名為 TaskDashboardComponent 的 Angular 20 智慧元件，使用 Signals 從服務載入資料，並管理載入和錯誤狀態。
建立一個使用 FormBuilder、驗證和 proper error handling 的 Angular 20 表單元件，搭配 nz-form 元件。
建立一個具有 OnPush 變更檢測的 Angular 20 展示元件，透過 input() 接收資料並透過 output() 發送變更，且不包含商業邏輯。
모범 사례
- 對所有元件狀態使用 signal() 並透過 asReadonly() 暴露以實現不可變存取
- 獨立元件一律使用 OnPush 變更檢測以提升效能
- 使用 inject() 函式注入服務而非建構函式以獲得更簡潔的程式碼
- 關注點分離：智慧元件處理資料載入，展示元件僅渲染資料
피하기
- 使用 @Input()/@Output() 裝飾器而非 input()/output() 函式
- 使用 *ngIf/*ngFor 而非 @if/@for 控制流語法
- 在元件中直接注入儲存庫而非服務
- 將商業邏輯放在元件而非服務層中