Angular：如何从孙组件调用祖父组件方法？求优化方案

方案一：通过@Input逐层传递方法 #

这种方式适合组件层级较少的场景，核心是将祖父组件的方法通过@Input依次传递给中间组件、孙组件。

步骤： #

1. 祖父组件模板：给中间组件传递绑定好上下文的方法

<mat-card *ngIf="department">
  <h1>{{ department.name }}</h1>   
  <app-department-message 
    [department]="department" 
    [sendBlockHandler]="sendBlockToBlockchain.bind(this)"
  ></app-department-message>
</mat-card>

2. 中间组件：添加@Input接收方法，并传递给孙组件

export class DepartmentMessageComponent {
  @Input() department: Department = {} as Department;
  @Input() sendBlockHandler!: (message: string) => void;
}

修改中间组件模板，给每个孙组件传入方法：

<ng-container *ngIf="department" [ngSwitch]="department.id">
  <app-client-message *ngSwitchCase="1" [sendBlockHandler]="sendBlockHandler"></app-client-message>
  <app-buyer-message *ngSwitchCase="2" [sendBlockHandler]="sendBlockHandler"></app-buyer-message>
  <app-financier-message *ngSwitchCase="3" [sendBlockHandler]="sendBlockHandler"></app-financier-message>
  <app-shipper-message *ngSwitchCase="4" [sendBlockHandler]="sendBlockHandler"></app-shipper-message>
  <app-producer-message *ngSwitchCase="5" [sendBlockHandler]="sendBlockHandler"></app-producer-message>
  <app-spectator-message *ngSwitchDefault [sendBlockHandler]="sendBlockHandler"></app-spectator-message>
</ng-container>

3. 孙组件：添加@Input接收方法，在sendMessage中调用

export class BuyerMessageComponent implements MessageComponent {
  @Input() sendBlockHandler!: (message: string) => void;

  sendMessage(message: string) {
    this.sendBlockHandler(message);
  }
}

方案二：通过@Output事件冒泡 #

利用Angular的事件绑定机制，孙组件触发事件，中间组件转发事件，最终由祖父组件响应事件并调用目标方法。

步骤： #

1. 孙组件：定义@Output事件，在sendMessage中触发

export class BuyerMessageComponent implements MessageComponent {
  @Output() messageSubmitted = new EventEmitter<string>();

  sendMessage(message: string) {
    this.messageSubmitted.emit(message);
  }
}

2. 中间组件：监听孙组件的事件，定义自身的@Output转发事件

export class DepartmentMessageComponent {
  @Input() department: Department = {} as Department;
  @Output() blockSendRequested = new EventEmitter<string>();

  onMessageSubmitted(message: string) {
    this.blockSendRequested.emit(message);
  }
}

修改中间组件模板，给每个孙组件绑定事件监听：

<ng-container *ngIf="department" [ngSwitch]="department.id">
  <app-client-message *ngSwitchCase="1" (messageSubmitted)="onMessageSubmitted($event)"></app-client-message>
  <app-buyer-message *ngSwitchCase="2" (messageSubmitted)="onMessageSubmitted($event)"></app-buyer-message>
  <app-financier-message *ngSwitchCase="3" (messageSubmitted)="onMessageSubmitted($event)"></app-financier-message>
  <app-shipper-message *ngSwitchCase="4" (messageSubmitted)="onMessageSubmitted($event)"></app-shipper-message>
  <app-producer-message *ngSwitchCase="5" (messageSubmitted)="onMessageSubmitted($event)"></app-producer-message>
  <app-spectator-message *ngSwitchDefault (messageSubmitted)="onMessageSubmitted($event)"></app-spectator-message>
</ng-container>

3. 祖父组件模板：监听中间组件的事件，调用目标方法

<mat-card *ngIf="department">
  <h1>{{ department.name }}</h1>   
  <app-department-message 
    [department]="department" 
    (blockSendRequested)="sendBlockToBlockchain($event)"
  ></app-department-message>
</mat-card>

方案三：使用共享服务（最优方案） #

通过Angular服务实现组件间的通信，彻底解耦祖孙组件，适合复杂组件树或需要跨组件共享逻辑的场景。

步骤： #

1. 创建共享服务：用Subject实现事件传递

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

@Injectable({ providedIn: 'root' })
export class BlockchainCommunicationService {
  private messageSubject = new Subject<string>();
  // 暴露可观察对象供订阅
  public message$ = this.messageSubject.asObservable();

  // 供孙组件调用的方法，触发事件
  public sendMessageToBlockchain(message: string): void {
    this.messageSubject.next(message);
  }
}

2. 祖父组件：注入服务并订阅事件，调用目标方法

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { BlockchainCommunicationService } from './blockchain-communication.service';

export class DepartmentComponent implements OnInit, OnDestroy {
  department: Department = {} as Department;
  private destroy$ = new Subject<void>();

  constructor(private blockchainService: BlockchainCommunicationService) {}

  ngOnInit(): void {
    this.blockchainService.message$
      .pipe(takeUntil(this.destroy$))
      .subscribe(message => {
        this.sendBlockToBlockchain(message);
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }

  public sendBlockToBlockchain(message: string) {
      // 原业务逻辑保留
  }
}

3. 孙组件：注入服务，在sendMessage中调用服务方法

import { Component } from '@angular/core';
import { MessageComponent } from "../department-message/department-message.component";
import { BlockchainCommunicationService } from '../../blockchain-communication.service';

export class BuyerMessageComponent implements MessageComponent {
  constructor(private blockchainService: BlockchainCommunicationService) {}

  sendMessage(message: string) {
    this.blockchainService.sendMessageToBlockchain(message);
  }
}

方案对比与最优选择 #

• 方案一：实现简单，但组件层级增加时，需要逐层传递@Input，代码冗余且维护成本高。
• 方案二：符合Angular事件流机制，但同样需要逐层转发事件，组件耦合度仍较高。
• 方案三：彻底解耦组件，无需关注组件层级关系，扩展性强，是复杂场景下的最优选择。

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