📚 课程目录第2章 Angular核心概念高频面试题

第 2 章：Angular 核心概念高频面试题

本章聚焦 Angular 面试中出现频率最高的三大核心概念：组件与模块、模板语法与数据绑定、指令与管道。每个知识点都从定义辨析、机制原理、代码落地到场景价值层层展开，帮助你建立「概念→原理→对比→应用」的完整回答链路。

核心领域	关键概念	面试高频点	掌握度
组件与模块	@Component、@NgModule、生命周期、DI	组件通信、模块作用域、懒加载	⭐⭐⭐⭐⭐
模板语法与数据绑定	插值、属性绑定、事件绑定、双向绑定	数据流方向、[(ngModel)] 原理	⭐⭐⭐⭐⭐
指令与管道	ngIf/ngFor、ngClass、@Directive、@Pipe	结构型 vs 属性型、纯管道优化	⭐⭐⭐⭐

问题 1：请解释 Angular 中 Component 和 Module 的区别，以及它们在应用中的职责。

🎯 面试官考察点：对 Angular 架构分层理解、组件化思维、模块化组织能力、依赖注入作用域认知。

📐 回答框架：

定定义区别 → Component 是 UI 视图构建块，Module 是功能组织单元
析各自职责 → 组件负责视图渲染与交互；模块负责声明、导入、提供配置
联协作关系 → 组件在模块中声明才能使用，模块按业务划分实现懒加载
证代码示例 → 给出 @Component 和 @NgModule 的典型结构片段

💡 示例回答：Component 是 UI 视图的构建块，包含模板、样式和业务逻辑；Module 是功能组织单元，用于声明组件、导入依赖、提供服务和配置。组件在 Module 中声明后使用，Module 按业务功能划分实现懒加载。

❓ 可能追问：

NgModule 的 providers 和 Component 的 providers 有什么区别？
Angular 为什么要设计 Module 而 React 不需要？
如何实现模块懒加载？

⚠️ 避坑提醒：不要只背概念，要结合项目说明分组依据；注意区分声明和提供服务的职责边界；避免说“Module 是 Component 的容器”这种简化表述。

问题 2：请列举 Angular 中支持的几种数据绑定方式，并说明它们的使用场景。

🎯 面试官考察点：对数据流方向的理解、模板语法熟练度、双向绑定原理认知、表单模块依赖意识。

📐 回答框架：

分分类列举 → 插值、属性绑定、事件绑定、双向绑定四种方式
语语法说明 → {{value}}、[property]、(event)、[(ngModel)]
举场景举例 → 插值显示文本，属性绑定传参，事件绑定交互，双向绑定表单
析原理简述 → 前三种单向，最后一种需 FormsModule 支持，本质是属性+事件的组合

💡 示例回答：四种绑定方式：插值 {{value}} 显示文本；属性绑定 [property] 传数据给子组件；事件绑定 (event) 监听用户操作；双向绑定 [(ngModel)] 实现表单双向同步。前三种是单向，最后一种需 FormsModule 支持。

❓ 可能追问：

[(ngModel)] 的原理是怎样的？
属性绑定和插值有什么区别？
如何实现自定义双向绑定？

⚠️ 避坑提醒：不要混淆属性绑定和插值语法；注意双向绑定需要导入 FormsModule；区分 [attr.attribute] 和 [property] 的绑定对象不同。

问题 3：请说明 Angular 中结构型指令和属性型指令的区别，并举例如何创建自定义指令和管道。

🎯 面试官考察点：指令分类理解、DOM 操作能力、自定义封装思维、纯管道性能意识。

📐 回答框架：

分分类说明 → 结构型改变 DOM 结构，属性型改变元素外观/行为
对对比区别 → 前者使用 * 语法，后者直接作为属性使用
示自定义方法 → @Directive 配合 Renderer2+ElementRef
补管道补充 → @Pipe 实现 transform 方法，默认纯管道可优化性能

💡 示例回答：结构型指令改变 DOM 结构（*ngIf、*ngFor），属性型指令改变元素外观或行为（ngClass、ngStyle）。自定义指令用 @Directive 装饰器并注入 Renderer2 操作 DOM；自定义管道用 @Pipe 实现 transform 方法，可设置 pure: false 为非纯管道。

❓ 可能追问：

结构型指令前的 * 号作用是什么？
纯管道和非纯管道的区别及性能影响？
自定义指令中如何使用 Renderer2 保证安全？

⚠️ 避坑提醒：自定义指令要注入 Renderer2 和 ElementRef 操作 DOM，避免直接使用原生 API；管道默认纯管道，注意非纯管道的性能开销；结构型指令要理解微语法和模板展开原理。

定位概念本质：一句话说清概念的定义和核心职责，避免模糊表述。
解析核心机制：拆解内部工作原理，体现源码阅读能力和深度。
对比其他框架：与 React/Vue 等横向对比，展示技术视野和差异化理解。
代码示例佐证：给出简洁的代码片段或配置结构，让回答有据可依。
总结应用场景：说明在真实项目中的使用方式，强调工程落地能力。