高频面试问题与回答框架
本章聚焦面试中最高频、也最容易踩坑的三个Angular UI工程化问题。每个问题都配有考察点拆解、结构化回答框架、示例回答以及追问应对，帮助你用“标准答案+灵活性”覆盖面试官的深层考察。
问题一：Angular组件样式隔离是如何实现的？
| 面试官考察点 | 是否理解 ViewEncapsulation 三种模式原理，能否说出真实项目中如何选择，是否了解 Shadow DOM 边界与回退方案。 |
| 回答框架 | ① 说明样式隔离的必要性 ② 列举 Emulated / None / ShadowDom 三种模式及行为 ③ 重点讲 Emulated 的 _ngcontent 属性选择器实现 ④ 给出选型建议：默认 Emulated，需要全局样式用 None，需要隔离且兼容现代浏览器用 ShadowDom ⑤ 提醒：ShadowDom 下组件外部样式无法穿透，需用 CSS 自定义属性通信。 |
| 简短示例回答 | Angular 默认采用 Emulated 模式，通过为组件模板元素添加 `_ngcontent-c0` 等属性，并在样式中附加对应属性选择器实现隔离。我通常在业务组件中使用默认模式；第三方 UI 库覆盖样式时用 `::ng-deep` 注意 scope；跨微前端场景考虑 ShadowDom。 |
| 可能追问 | • `::ng-deep` 为什么被废弃？替代方案是什么？ • 如何让 ShadowDom 组件接收全局主题变量？ • 大量组件使用 Emulated 对性能有何影响？ |
| 避坑提醒 | 不要答成“CSS 变量”或“CSS Modules”——Angular 不依赖它们。避免说“ShadowDom 是唯一安全方案”，实际兼容性需考虑 IE / 旧浏览器。 |
面试官侧重点：大厂特别关注你对 Shadow Dom 实际坑点的了解（比如表单控件无法继承字体、弹窗层级），以及是否能在 SSR 场景下正确处理样式。
问题二：如何优化 Angular 组件的变更检测性能？
| 面试官考察点 | 是否理解 Angular 默认脏检查机制，是否掌握 OnPush 策略、ChangeDetectionRef 手动控制、Immutable 数据模式，能否结合实际场景给出分层优化方案。 |
| 回答框架 | ① 点出 Angular 默认对每个组件进行全量脏检查（按下到根组件向下遍历） ② 核心优化：设置 `ChangeDetectionStrategy.OnPush`，仅当输入引用变化或组件内触发事件时检查 ③ 配合 Immutable 数据或不可变库（immer/freeze） ④ 利用 `ChangeDetectionRef.detach()` 对高频更新组件（如动画、实时数据流）手动控制 ⑤ 对于列表大数据用 `trackBy` 减少 DOM 操作。 |
| 简短示例回答 | 我会默认给所有业务组件加上 OnPush 策略。对列表组件使用 trackBy；对于 WebSocket 推送的实时数据，采用 Immutable 更新对象引用，并只在必要时调用 `ChangeDetectionRef.markForCheck()`。这样可以减少 60% 以上的脏检查次数。 |
| 可能追问 | • OnPush 下如何触发子组件更新？ • `markForCheck()` 和 `detectChanges()` 区别？ • 大量 OnPush 组件嵌套会不会有坑？ • 异步管道（async）在 OnPush 下如何工作？ |
| 避坑提醒 | 避免只说“用 OnPush就行”，必须解释输入引用变化条件。不要混淆 `markForCheck` 和 `detectChanges`：前者从当前到根标记，后者只检测当前子树；面试中常考两者区别。 |
加分技巧：可以提到新版本 Zone 的替代方案（Zone-less 应用使用 RxJS 调度变更检测），或与 `DirtyCheckPlugin` 配合实现可预测性能。
问题三：Angular 路由懒加载的实现原理与注意事项
| 面试官考察点 | 是否了解 `loadChildren` 与动态导入语法，是否知道预加载策略及自定义加载器，能否阐述模块懒加载对打包的影响（chunk分割），以及懒加载模块的共享依赖如何避免重复打包。 |
| 回答框架 | ① 路由配置使用 `loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)` ② 原理：Angular 编译器将懒加载模块单独打包成独立 chunk，路由激活时动态加载 chunk 并注册依赖 ③ 配合 `PreloadAllModules` 或自定义预加载策略平衡首屏与子页面速度 ④ 注意：共享模块（如 SharedModule）如果被多个懒加载模块引用，需确保使用 `forRoot/forChild` 避免服务单例丢失 ⑤ 大型项目可用模块 federation + 懒加载实现微前端。 |
| 简短示例回答 | 我会在路由定义中使用 `loadChildren` 配合动态 `import()`，同时设置 `preloadingStrategy: PreloadAllModules`。注意将不会频繁变动的第三方库通过 `optimization.splitChunks` 抽离，懒加载模块中只包含业务代码。遇到模块间共享服务时，在 CoreModule 的 `forRoot` 中提供单例。 |
| 可能追问 | • 如何调试懒加载模块的 chunk 加载失败？ • 懒加载模块中再嵌套子路由需要注意什么？ • 自定义预加载策略如何实现？ • 与 Angular Elements 结合时懒加载如何处理？ |
| 避坑提醒 | 不要背诵老版本 `loadChildren: './lazy.module#LazyModule'` 字符串语法——Angular 8+ 已废弃，必须用动态 import。另外注意懒加载模块的 `Router.forChild` 必须独立注册自己的路由。 |
高频考察陷阱：面试官常问“懒加载模块能否导出组件给其他模块使用？”——不能，懒加载模块内部组件只能在其路由子树内使用，如需共享应放入 SharedModule。
总结：三个问题覆盖样式隔离、性能优化、工程化拆分三大高频领域。面试时按照“理解问题→回顾API→场景举例→代码演示→性能陷阱”的框架回答，即可展现全面且结构化的技术思维。