在 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 通信模式对比 👉