在 Angular 开发中，组件间通信是构建复杂应用的核心能力。以下是主要通信方式及实践建议：

一、父子组件通信 👨‍👩‍👧‍👦

  1. 属性绑定
    使用 @Input() 接收父组件数据
    示例：<child [data]="parentData"></child>

  2. 事件发射
    通过 @Output() 向上传递数据
    示例：<child (event)="handleEvent()"></child>

    父子组件通信_示意图

  3. 服务共享
    通过共享服务实现跨层级通信
    需创建 @Injectable() 服务类
    示例：this.sharedService.setData(value);

二、兄弟组件通信 🔁

  1. 共同父组件中转
    兄弟组件通过父组件传递数据
    需使用 EventEmitter 或 Subject

  2. 使用 RxJS Subject
    创建可观察对象实现双向通信
    示例：const subject = new Subject();

    兄弟组件通信_示意图

三、跨组件通信 📦

  1. Service 服务
    通过 @Injectable() 服务实现全局通信
    推荐使用 BehaviorSubject 或 Subject

  2. Router 传参
    使用路由参数在不同路由组件间传递数据
    示例：this.router.navigate(['/target'], { state: { data } })

  3. Angular 的 @ViewChildren & @ContentChildren
    通过查询子组件实现动态通信

四、推荐学习路径 🚀

  1. Angular 组件生命周期详解（理解通信时机）
  2. Angular 服务注入实践（深入服务使用）
  3. RxJS 操作符指南（掌握响应式编程）

📌 提示：组件通信需遵循"最小权限原则"，优先使用服务而非直接父子传递，避免过度耦合

Angular_组件通信_架构图