Angular 2中嵌套子组件触发事件的最优实现方式？

这种逐层转发@Output事件的方式完全没必要，不仅代码冗余，还会增加后续的维护成本。下面给你几个更高效的实现方案，按适用场景排序：

1. RxJS Subject 共享服务（最推荐，解耦且通用） #

这是处理多层嵌套组件通信的标准方案，通过一个全局或模块级的服务，用RxJS的Subject来传递事件，完全不需要逐层转发。

步骤1：创建共享事件服务 #

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class EventService {
  // 用Subject定义事件流，若需要初始值可改用BehaviorSubject
  private functionTriggered$ = new Subject<any>();

  // 子组件调用此方法触发事件
  triggerFunction(argument: any) {
    this.functionTriggered$.next(argument);
  }

  // 父组件订阅此流获取事件通知
  getFunctionTriggered() {
    return this.functionTriggered$.asObservable();
  }
}

步骤2：父组件订阅事件 #

import { Component, OnDestroy } from '@angular/core';
import { EventService } from './event.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `
    <!-- 无需向子组件传递任何事件绑定 -->
    <app-componentchild1></app-componentchild1>
  `
})
export class ParentComponent implements OnDestroy {
  private eventSubscription: Subscription;

  constructor(private eventService: EventService) {
    // 订阅事件流，处理业务逻辑
    this.eventSubscription = this.eventService.getFunctionTriggered().subscribe(argument => {
      this.functionThatDoSomething(argument);
    });
  }

  functionThatDoSomething(argument: any) {
    console.log('处理参数:', argument);
    // 你的业务逻辑
  }

  // 组件销毁时取消订阅，防止内存泄漏
  ngOnDestroy() {
    this.eventSubscription.unsubscribe();
  }
}

步骤3：任意层级子组件触发事件 #

不管嵌套多少层，直接注入服务触发事件即可，无需中间组件转发：

import { Component } from '@angular/core';
import { EventService } from './event.service';

@Component({
  selector: 'app-componentchild2',
  template: `
    <button (click)="triggerParentLogic()">触发父组件方法</button>
  `
})
export class ComponentChild2Component {
  constructor(private eventService: EventService) {}

  triggerParentLogic() {
    const param = '需要传递的内容';
    this.eventService.triggerFunction(param);
  }
}

如果需要区分多种事件类型，可以在服务中定义多个Subject，或者传递带类型标识的事件对象。

2. @ViewChild / @ViewChildren 直接跨层访问（适合浅嵌套） #

如果组件嵌套层级不多（比如父→子→孙），可以跳过中间层，直接在父组件中获取深层子组件的实例，订阅其事件或调用方法。

孙组件（ComponentChild2）定义@Output #

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-componentchild2',
  template: `<button (click)="function.emit('参数')">触发事件</button>`
})
export class ComponentChild2Component {
  @Output() function = new EventEmitter<any>();
}

中间组件（ComponentChild1）暴露孙组件实例 #

import { Component, ViewChild } from '@angular/core';
import { ComponentChild2Component } from './component-child2.component';

@Component({
  selector: 'app-componentchild1',
  template: `<app-componentchild2 #child2></app-componentchild2>`
})
export class ComponentChild1Component {
  @ViewChild('child2') child2: ComponentChild2Component;
}

父组件直接订阅孙组件事件 #

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ComponentChild1Component } from './component-child1.component';

@Component({
  selector: 'app-parent',
  template: `<app-componentchild1 #child1></app-componentchild1>`
})
export class ParentComponent implements AfterViewInit {
  @ViewChild('child1') child1: ComponentChild1Component;

  ngAfterViewInit() {
    // 直接订阅孙组件的事件
    this.child1.child2.function.subscribe(argument => {
      this.functionThatDoSomething(argument);
    });
  }

  functionThatDoSomething(argument: any) {
    // 处理逻辑
  }
}

这种方案适合层级较浅的场景，避免中间层的事件转发，但层级过深时会导致代码可读性下降。

3. 依赖注入传递父组件实例（谨慎使用，耦合度高） #

如果子组件仅在当前父组件的上下文使用，没有复用需求，可以通过依赖注入让子组件直接获取父组件实例，调用其方法。

父组件提供自身实例 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-componentchild1></app-componentchild1>`,
  // 提供自身实例，让子组件可以注入
  providers: [{ provide: ParentComponent, useExisting: ParentComponent }]
})
export class ParentComponent {
  functionThatDoSomething(argument: any) {
    // 处理逻辑
  }
}

子组件直接调用父组件方法 #

import { Component } from '@angular/core';
import { ParentComponent } from './parent.component';

@Component({
  selector: 'app-componentchild2',
  template: `<button (click)="callParentMethod()">触发父方法</button>`
})
export class ComponentChild2Component {
  constructor(private parent: ParentComponent) {}

  callParentMethod() {
    this.parent.functionThatDoSomething('参数');
  }
}

这个方案的缺点是组件耦合度极高，子组件完全依赖父组件，一旦父组件重构或子组件需要在其他地方复用，代码就会失效，仅适合特定的强耦合场景。

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