第3章 组件通信与数据绑定面试
在 Angular 面试中，组件通信与数据绑定是必考的核心能力。面试官常通过 父子传值、EventEmitter、双向绑定 及 Component API 来考察你对数据流和变更检测的理解。本章精选 3 个高频问答，配合回答框架图和追问路径图，帮助你快速掌握结构化表达。
面试问答 1：父子组件如何通信？
面试问题：请解释 Angular 中父子组件如何实现通信？
考察点：对 @Input、@Output、EventEmitter 的理解，以及单向数据流原则。
回答框架：先划分输入与输出角色，再说明装饰器使用，最后强调数据流方向与不可变性。
示例回答：父组件通过 @Input 绑定传递数据，子组件通过 @Output 和 EventEmitter 发射事件。这是单向数据流的核心，保证了数据可追溯。使用 setter 或 ngOnChanges 可监听输入变化。
可能追问：如果我想监听输入属性的变化，除了 setter 还有什么方法？
答：ngOnChanges 生命周期钩子，它接收 SimpleChanges 对象，可获取当前值与上一次值。
避坑提醒：不要直接在子组件中修改父组件传入的对象，应使用不可变对象或通过事件通知父组件修改。
面试问答 2：Angular 中双向绑定的实现方式？
面试问题：如何在 Angular 中实现双向绑定？有哪些方式？
考察点：熟悉 [(ngModel)] 的语法糖原理，以及自定义双向绑定的约定（xxxChange）。
回答框架：区分内置 ngModel 与自定义绑定；说明语法糖本质是属性绑定 + 事件绑定。
示例回答：内置双向绑定使用 [(ngModel)]，需导入 FormsModule。自定义双向绑定通过同时实现 @Input() 和 @Output() 属性名符合 “xxxChange” 约定，在子组件中 emit 变更事件。
可能追问：自定义双向绑定中，如何确保变更检测正确触发？
答：使用 EventEmitter.emit() 发射新值，Angular 自动触发变更检测。若使用 OnPush 策略需手动调用 markForCheck()。
避坑提醒：不要混淆双向绑定与单向绑定的使用场景，双向绑定适合表单，单向绑定适合业务逻辑层。
面试问答 3：组件通信的多种方式及优劣比较
面试问题：请列举 Angular 组件通信的几种方式，并比较优劣。
考察点：全面了解组件通信方案，包括父子、兄弟、跨级场景的选择依据。
回答框架：按通信层级分类：父子（@Input/@Output）、兄弟（共用 Service）、跨级（依赖注入或状态管理）。
示例回答：父子通信使用 @Input/@Output；兄弟通信通过共用 Service 加 Subject；跨级通信可使用依赖注入或 NgRx 状态管理。选择依据是通信范围和复杂度，小范围优先用装饰器。
可能追问：如果组件层级很深，如何避免逐层传递？
答：使用服务注入或全局状态管理，例如将数据放在服务中并通过依赖注入提供，子组件直接注入服务获取数据。
避坑提醒：过度使用全局状态管理会导致架构复杂，小范围通信优先使用 @Input/@Output。