📚 课程目录第4章 UI组件库开发实战

4. UI组件库开发实战：组件设计、封装、样式隔离、主题定制

  本章导读

  面试中高频出现“如何设计一个可复用的UI组件？”“样式隔离怎么做？”“主题定制如何支持？”等问题。核心考察点在于：API设计原则、ViewEncapsulation机制、CSS变量与主题服务、Tree Shaking支持。本章从实战出发，拆解常见追问路径。

💡 面试加分点：在回答组件设计时，主动提及 OnPush 变更检测、forRoot/forChild 模块导出、以及通过 providedIn: 'root' 实现 Tree Shaking，会显著提升印象分。

Q1：如何设计一个高可复用的 Angular UI 基础组件（如 Button）？

面试官考察点	① 是否理解组件输入/输出的最小暴露原则；② 是否考虑样式隔离与主题扩展；③ 是否知道 Angular 模块封装与 Tree Shaking 的关系。
回答框架	需求 → API → 样式 → 主题：先明确使用场景（禁用、loading、icon），再设计 `@Input`（type, size, disabled, loading）和 `@Output`（click），最后通过 `@HostBinding` 和 CSS 变量提供样式扩展。
简短示例回答	“我通常先定义组件属性：`@Input() variant: 'primary'\|'secondary'`；然后通过 `@HostBinding('class')` 绑定动态类名；样式采用 Emulated 封装，但保留 CSS 变量供外部覆盖，如 `--btn-bg`。最后导出模块时使用 `forRoot` 支持根注入。” （字数：98 字）
可能追问	• 如何让组件支持 loading 状态且不影响原有交互逻辑？ • 组件的 ChangeDetection 为什么要用 OnPush？ • 如果同时支持 `formControl` 绑定，需要做哪些调整？
避坑提醒	⚠️ 不要将样式硬编码在组件的 CSS 中，应通过 CSS 变量或主题服务暴露修改入口。避免在组件模板中直接使用全局样式类造成样式污染。

Q2：Angular 组件样式隔离有哪些方式？你会如何选择？

面试官考察点	① 是否清楚 ViewEncapsulation 三种模式及原理；② 是否会根据组件类型（内部／对外）选择隔离策略；③ 是否了解 Shadow DOM 的弊端及 Emulated 的优化点。
回答框架	先列举三种模式（Emulated、ShadowDom、None），对比优缺点；然后说明组件库推荐用 Emulated，因为兼容性好、无需 Shadow DOM polyfill；最后补充如何通过 `::ng-deep` 或 CSS 变量实现受控穿透。
简短示例回答	“Angular 默认 Emulated 模式通过属性选择器实现隔离，兼顾性能与兼容性。对于组件库，我优先使用 Emulated；如果组件需要彻底隔离（如富文本编辑器），才考虑 ShadowDom。Never 使用 None，除非是全局 layout 组件。” （字数：96 字）
可能追问	• Shadow DOM 模式下如何让弹窗组件挂载到 body？ • Emulated 模式下 `::ng-deep` 被弃用后你用什么替代方案？ • 如何测试样式隔离是否正确？
避坑提醒	⚠️ 不要在 Emulated 组件中使用 `:host-context()` 依赖全局类名，这会破坏隔离性。需用 CSS 变量或 `@Input` 传递样式。

Q3：如何实现组件库的主题定制（如 light/dark 切换）？

面试官考察点	① 是否掌握 CSS 变量与 Angular 主题服务结合方案；② 是否了解 Sass mixin 和 runtime 主题切换；③ 是否考虑过按需加载主题样式以减少包体积。
回答框架	最推荐方案：定义 CSS 变量在 `:root`，通过 Angular 服务管理主题类名；组件内使用 `var(--color-primary)`。高级方案可用 Sass Mixin + `@angular/cdk/a11y` 的系统主题检测。
简短示例回答	“我会创建一个 `ThemeService` 存储主题名，在根组件动态切换 `data-theme` 属性。每个组件通过 CSS 变量引用，如 `--bg: var(--theme-bg)`。使用 `@angular/cdk/a11y` 监听 prefers-color-scheme 自动切换。” （字数：95 字）
可能追问	• 如果用户自定义了一个色值，如何持久化到 localStorage？ • 主题样式中的如何管理（如颜色 > 语义层 > 组件层）？ • 如何避免主题切换时页面闪烁？
避坑提醒	⚠️ 不要在每个组件中硬编码主题变量，应统一在全局 styles.scss 中定义 CSS 自定义属性。切换主题时避免使用昂贵的样式重建操作。

📌 高频面试总结
UI 组件库面试的三大支柱：API 设计（Input/Output 最小化）、样式隔离（Emulated + CSS 变量）、主题系统（ + Service）。回答时务必带出 Angular 特有机制（ViewEncapsulation、改动检测策略、模块导出），并展现对实际工程场景（按需加载、持久化、兼容性）的思考。

  推荐练习场景：动手实现一个具备 hover/active/disabled 状态的 mi-button 组件，要求：

  ✓ 支持 size="sm|md|lg"

  ✓ 支持 variant="primary|danger|outline"

  ✓ 样式隔离且可通过 CSS 变量全局切换主题

  ✓ 支持 loading 状态并禁用点击