在 Angular 开发中,组件通信是构建复杂应用的核心能力。以下是常见通信方式及示例:


1. 父组件 → 子组件通信

  • 通过 @Input() 装饰器传递数据
    父组件_子组件通信
  • 使用 EventEmitter 触发事件
    示例:<app-child (customEvent)="handleEvent()"></app-child>

2. 子组件 → 父组件通信

  • 通过 @Output() 创建事件
    子组件_父组件交互
  • 传递数据给父组件:<app-child (notify)="updateParent($event)"></app-child>

3. 兄弟组件通信

  • 使用 EventEmitter + 父组件中转
  • 或通过 @Injectable 服务共享数据
    兄弟组件_服务共享

4. 跨多层组件通信

  • 利用 Service 实现数据共享
    服务共享_跨层级
  • 使用 @ViewChild/@ContentChild 获取子组件实例

5. 全局通信方案

  • EventEmitter + Service 组合
  • BehaviorSubject 实现实时数据流
  • 事件总线模式(推荐阅读:Angular 事件总线实践

通信最佳实践

✅ 使用 Service 处理复杂数据共享
✅ 避免过度使用 @Input()/@Output()
⚠️ 注意事件命名规范,避免冲突

需要更深入的实践案例?点击这里查看 Angular 通信模式对比 👉