如何在父组件中获取三级子组件的事件输出？

方案1：@Output链式中转（最直接的层级传递） #

• 实现步骤：
  • 三级子组件定义@Output()和EventEmitter，触发事件时调用emit()：

    @Output() childEvent = new EventEmitter<any>();
    
    triggerEvent() {
      this.childEvent.emit('来自三级组件的数据');
    }
    

  • 二级子组件在模板中监听三级组件的事件，同时自身定义对应的@Output()中转：

    <!-- 二级组件模板 -->
    <app-grand-child (childEvent)="forwardEvent($event)"></app-grand-child>
    

    // 二级组件类
    @Output() grandChildEvent = new EventEmitter<any>();
    
    forwardEvent(data: any) {
      this.grandChildEvent.emit(data);
    }
    

  • 父组件直接监听二级子组件的中转事件：

    <!-- 父组件模板 -->
    <app-child (grandChildEvent)="handleEvent($event)"></app-child>
    

• 适用场景：组件层级固定且较少（仅三级），无需跨无关组件通信的场景
• 优缺点：代码直观，无额外依赖；但中间组件需写中转逻辑，层级越多冗余代码越多，耦合性略高

方案2：RxJS共享服务（解耦的跨层级通信） #

• 实现步骤：
  1. 创建全局共享服务：

  import { Injectable } from '@angular/core';
  import { Subject } from 'rxjs';
  
  @Injectable({ providedIn: 'root' })
  export class EventService {
    private eventSubject = new Subject<any>();
    event$ = this.eventSubject.asObservable();
  
    emitEvent(data: any) {
      this.eventSubject.next(data);
    }
  }
  

  2. 三级子组件注入服务，触发事件时调用emitEvent()：

  constructor(private eventService: EventService) {}
  
  triggerEvent() {
    this.eventService.emitEvent('来自三级组件的数据');
  }
  

  3. 父组件注入服务并订阅事件，注意销毁订阅避免内存泄漏：

  import { Subscription } from 'rxjs';
  
  private eventSubscription!: Subscription;
  
  constructor(private eventService: EventService) {}
  
  ngOnInit() {
    this.eventSubscription = this.eventService.event$.subscribe(data => {
      this.handleEvent(data);
    });
  }
  
  ngOnDestroy() {
    this.eventSubscription.unsubscribe();
  }
  

  也可以用async pipe自动管理订阅，无需手动销毁：

  <!-- 父组件模板 -->
  <ng-container *ngIf="eventService.event$ | async as eventData">
    接收到三级组件事件：{{ eventData }}
  </ng-container>
  

• 适用场景：组件层级深、跨多层级通信，或多个无关组件需监听同一事件的场景
• 优缺点：完全解耦中间组件，中间组件无需关心事件传递；是Angular中跨组件通信的高效标准方案，只要正确处理订阅销毁就没问题

方案3：直接注入父组件实例（不推荐） #

• 实现方式：三级子组件通过构造函数直接注入父组件实例，调用父组件方法：

  constructor(private parentComp: ParentComponent) {}
  
  triggerEvent() {
    this.parentComp.handleEvent('来自三级组件的数据');
  }
  

• 缺点：耦合性极强，父组件与三级组件直接绑定，严重破坏组件封装性，维护性极差，不推荐使用

最优选择建议 #

• 如果组件层级固定且仅三级，@Output链式中转是最直接的选择，代码简单易理解，无额外复杂度
• 如果后续可能增加层级、需要跨更多组件通信，或希望解耦中间组件，RxJS共享服务是更优的方案，它能适配更复杂的场景，且符合Angular的最佳实践

内容的提问来源于stack exchange，提问作者Rich