📚 课程目录第3章 Angular核心概念深度解析

第3章 Angular核心概念深度解析：组件、指令、管道、模板语法

💡 本章聚焦Angular三大核心抽象——组件、指令、管道，以及模板语法的组合使用。面试高频考点包括：组件通信方式、指令分类与实现、管道纯性理解、模板引用与数据流。掌握这些概念的内在关联，是区分“会写Angular”与“懂Angular设计”的关键分水岭。

核心概念对比表

概念	核心职责	与模板交互方式	生命周期	典型面试考点
组件	封装视图+逻辑，构成UI单元	@Input/@Output、属性绑定、事件绑定	ngOnInit, ngOnChanges, ngOnDestroy等	组件通信、生命周期、变更检测策略
指令	操作DOM或扩展元素行为	属性型指令：选择器绑定；结构型指令：*语法糖	ngOnInit, ngOnDestroy（无内容投影）	结构vs属性、自定义指令实现、ngFor优化
管道	数据格式转换，模板中直接使用	管道操作符 \| 加上参数（如 \| date:'yyyy')	纯管道：不可变对象触发；不纯管道：每次变更检测	纯vs不纯、性能优化、内置管道覆盖场景
模板语法	声明式绑定与指令、管道协作	插值、属性绑定、事件绑定、双向绑定	无独立生命周期，依赖宿主组件	模板引用变量、安全导航符、模板表单

面试问答卡片

🎯 问题1：Angular组件通信有哪些方式？请对比优缺点。

面试官考察点	是否掌握多场景通信方案；能否基于业务场景权衡性能与可维护性；对变更检测策略的理解深度。
回答框架	分类（父子/兄弟/跨级）→ 列举方案（@Input/@Output、Service/Subject、ViewChild、local引用）→ 对比优缺点（耦合度、可测试性、性能）→ 给出场景建议（简单父子用Input/Output，跨模块用Service）
简短示例回答	组件通信按关系分：父子用@Input/@Output，兄弟通过父组件桥接或共享Service（配合Subject），跨模块用Redux或DI层级。@Input紧耦合但直观；Service松耦合但需管理订阅清理。我通常会先确定数据流方向，再选择方案。
可能追问	1. 父子组件用@Input传递对象时，如何避免不必要的变更检测？2. 使用Service通信时，如何防止内存泄漏？3. 对比EventEmitter和Subject的异同。
避坑提醒	❌ 滥用ViewChild直接修改子组件属性，破坏封装；✅ 优先使用Input/Output，仅在需要访问子组件公开API时使用ViewChild。记忆点：数据流向下，事件流向上。

🎯 问题2：结构型指令与属性型指令的核心区别？请实现一个自定义属性型指令“点击外部关闭”并说明要点。

面试官考察点	对指令分类的理解深度；能否手写复杂指令；宿主元素绑定与DOM事件处理；是否考虑销毁清理。
回答框架	定义区别（结构型改变DOM结构 vs 属性型改变行为/外观）→ 举例（*ngIf vs [hidden]）→ 自定义属性型指令步骤（@Directive + HostListener + ElementRef）→ 关键注意（移除全局事件监听）
简短示例回答	结构型如*ngFor通过微语法增删DOM；属性型如[class]只修改元素属性。实现“点击外部关闭”指令：使用@HostListener('document:click')监听，判断点击目标是否在host元素内，若在外部则触发关闭事件。注意在ngOnDestroy中解绑全局事件。
可能追问	1. 如何让该指令支持配置（如点击外部关闭但排除某些子元素）？2. 为什么不能用@HostListener绑定window？3. 与结构型指令组合使用时需注意什么？
避坑提醒	❌ 在指令constructor中访问ElementRef.nativeElement可能导致服务端渲染错误；✅ 使用Renderer2或@HostBinding替代。记忆点：属性型指令不要修改DOM结构，只改行为或外观。

🎯 问题3：纯管道（pure）与不纯管道（impure）的区别？实际项目中如何选择？

面试官考察点	对Angular变更检测机制的理解；性能意识；能否在复杂场景下正确选择管道类型。
回答框架	定义纯管道（输入引用不变则不执行）vs 不纯管道（每次变更检测都执行）→ 性能影响（纯管道快，不纯管道慢）→ 使用场景（纯：date、currency等纯转换；不纯：异步数据、可变对象内部变化）→ 替代方案（不纯管道考虑用组件内计算属性减少触发）
简短示例回答	纯管道只有输入引用变化时才重新计算，性能好，适合date、uppercase等；不纯管道每次变更检测都会执行，适合异步管道或需要监听数组内部变化的场景，但要注意性能开销。我通常优先用纯管道，遇到数组过滤等场景改用组件内getter或trackBy。
可能追问	1. 如何手动将纯管道改为不纯管道？2. 使用async pipe的本质是纯还是不纯？3. 在OnPush策略下纯管道表现有什么变化？
避坑提醒	❌ 在纯管道中依赖全局状态或外部变量，导致结果不同步；✅ 纯管道应保持纯函数，所有依赖通过参数传入。记忆点：纯管道 = 输入不变输出不变。

公司侧重点分析

字节跳动（抖音电商）：侧重组件性能优化与大型列表渲染（虚滚+trackBy），常考OnPush + ChangeDetectorRef手动控制。
阿里（钉钉）：关注自定义指令的可复用性与组件库设计（如NG-ZORRO二次开发），高频题：双向绑定、ControlValueAccessor。
腾讯（微信支付）：面试常结合安全场景（防止XSS）、模板安全导航符（?.），以及管道在国际化（i18n）中的使用。
美团（核心交易）：偏向数据驱动的组件通信，如通过路由参数传递数据、父组件触发子组件方法（@ViewChild vs 服务层）。

面试官画像

典型面试官：前端架构师 / 资深前端工程师，3-8年经验，通常负责核心业务模块或基础组件库。提问风格：先考察基础概念，再通过追问深挖底层原理。例如“请实现一个自定义管道，说说如果用纯管道处理异步数据会怎样？”——意在检验对变更检测和依赖注入的掌握程度。他们更看重你能不能在提出方案时给出性能权衡依据，而非仅仅背答案。