Angular UI Patterns

技能概述

Angular UI Patterns 提供现代 Angular 应用的 UI 状态管理最佳实践，涵盖加载状态、错误处理、空状态设计和用户交互反馈的完整解决方案。

适用场景

1. 构建 Angular UI 组件时 需要实现加载状态、错误提示、空数据展示等常见 UI 模式的组件开发场景。

2. 处理异步数据时 从 API 获取数据、表单提交、文件上传等需要展示加载和错误状态的异步操作场景。

3. 管理组件状态时 使用 Signal 管理响应式状态，需要正确处理 loading、error、success、empty 等状态的场景。

核心功能

1. 加载状态模式 提供何时使用 skeleton 或 spinner 的明确指南，避免 stale UI 闪烁问题，确保只在无数据时显示加载状态。

2. 错误处理层级 定义四层错误处理策略：字段级 inline error、可恢复的 toast 通知、页面级 error banner、全屏 error state。

3. 控制流最佳实践 使用 Angular 17+ 的 @if/@else、@for/@empty、@defer 等新语法实现条件渲染、列表渲染和渐进式加载。

常见问题

什么时候用 skeleton 而不是 spinner？

使用 skeleton 适用于已知内容形状的场景，如列表、卡片布局的初始页面加载。使用 spinner 适用于内容形状未知或操作范围较小的场景，如模态框内的操作、按钮提交、行内操作。

Angular @defer 如何使用？

@defer 用于延迟加载非关键内容，提升首屏加载速度。基本用法是在 @defer 块中包裹内容，可配合 @placeholder、@loading、@error 使用。常见触发方式包括 on viewport（进入视口时）、on idle（浏览器空闲时）、on timer（延迟后）。

如何防止用户重复点击提交按钮？

在异步操作期间，必须将按钮的 disabled 属性绑定为 true，并在按钮内显示 spinner 或"提交中..."文本。同时在组件中使用 signal 管理提交状态，确保在 try-finally 块中正确重置状态。