Angular组件通信：从孙子组件调用祖父组件方法的两种策略

// buyer-message.component.ts
import { Component, Output, EventEmitter } from '@angular/core';
import { MessageComponent } from '../department-message/department-message.component'; // 假设有此接口

@Component({
  selector: 'app-buyer-message',
  template: `
    <textarea rows="3" cols="40" #message></textarea>
    <button (click)="sendMessage(message.value)">发送消息</button>
  `
})
export class BuyerMessageComponent implements MessageComponent {
  // 定义一个输出事件，命名应具有描述性，例如 messageSent 或 blockToBlockchain
  @Output() messageChange = new EventEmitter<string>();

  sendMessage(message: string): void {
    // 触发事件，将消息作为事件载荷发出
    this.messageChange.emit(message);
  }
}

// department-message.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Department } from '../../models/department.model'; // 假设有此模型

@Component({
  selector: 'app-department-message',
  template: `
    <ng-container *ngIf="department" [ngSwitch]="department.id">
      <!-- 监听孙子组件的 messageChange 事件，并将其转发 -->
      <app-client-message *ngSwitchCase="1"></app-client-message>
      <app-buyer-message *ngSwitchCase="2" (messageChange)="forwardMessage($event)"></app-buyer-message>
      <app-financier-message *ngSwitchCase="3"></app-financier-message>
      <app-shipper-message *ngSwitchCase="4"></app-shipper-message>
      <app-producer-message *ngSwitchCase="5"></app-producer-message>
      <app-spectator-message *ngSwitchDefault></app-spectator-message>
    </ng-container>
  `
})
export class DepartmentMessageComponent {
  @Input() department: Department = {} as Department;
  // 中间组件也需要定义一个输出事件，用于向其父组件（即祖父组件）转发消息
  @Output() messageChange = new EventEmitter<string>();

  // 接收孙子组件发出的事件，并重新发出
  forwardMessage(message: string): void {
    this.messageChange.emit(message);
  }
}

// department.component.ts
import { Component } from '@angular/core';
import { Department } from './models/department.model'; // 假设有此模型

@Component({
  selector: 'app-department',
  template: `
    <mat-card *ngIf="department">
      <h1>{{ department.name }}</h1>   
      <!-- 监听中间组件的 messageChange 事件，并调用本地方法 -->
      <app-department-message [department]="department" (messageChange)="sendBlockToBlockchain($event)"></app-department-message>
    </mat-card>
  `
})
export class DepartmentComponent {
  department: Department = {} as Department;

  public sendBlockToBlockchain(message: string): void {
      console.log('祖父组件接收到消息并执行方法:', message);
      // 这里是祖父组件中需要被调用的方法逻辑
  }
}

// blockchain.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // 确保服务在整个应用中是单例的，可以被所有组件注入
})
export class BlockchainService {
  constructor() { }

  public sendBlockToBlockchain(message: string): void {
    console.log('BlockchainService 接收到消息并执行区块链操作:', message);
    // 这里是原祖父组件中 sendBlockToBlockchain 方法的实际逻辑
    // 例如：调用API、更新状态等
  }

  // 如果祖父组件需要获取区块链状态，也可以在这里定义相关方法和属性
  // private _blockchainStatus = new BehaviorSubject<string>('Idle');
  // blockchainStatus$ = this._blockchainStatus.asObservable();
  // updateStatus(status: string) { this._blockchainStatus.next(status); }
}

// buyer-message.component.ts
import { Component } from '@angular/core';
import { MessageComponent } from '../department-message/department-message.component';
import { BlockchainService } from '../../services/blockchain.service'; // 导入服务

@Component({
  selector: 'app-buyer-message',
  template: `
    <textarea rows="3" cols="40" #message></textarea>
    <button (click)="sendMessage(message.value)">发送消息</button>
  `
})
export class BuyerMessageComponent implements MessageComponent {
  // 通过构造函数注入 BlockchainService
  constructor(private blockchainService: BlockchainService) {}

  sendMessage(message: string): void {
    // 直接调用服务中的方法
    this.blockchainService.sendBlockToBlockchain(message);
  }
}

// department.component.ts
import { Component, OnInit } from '@angular/core';
import { Department } from './models/department.model';
import { BlockchainService } from './services/blockchain.service'; // 导入服务

@Component({
  selector: 'app-department',
  template: `
    <mat-card *ngIf="department">
      <h1>{{ department.name }}</h1>   
      <app-department-message [department]="department"></app-department-message>
      <!-- 如果服务有状态，可以在此显示 -->
      <!-- <p>区块链状态: {{ blockchainStatus | async }}</p> -->
    </mat-card>
  `
})
export class DepartmentComponent implements OnInit {
  department: Department = {} as Department;
  // blockchainStatus: Observable<string>; // 如果服务提供状态

  constructor(private blockchainService: BlockchainService) {}

  ngOnInit(): void {
    // 如果需要，可以在这里订阅服务的状态
    // this.blockchainStatus = this.blockchainService.blockchainStatus$;
  }

  // sendBlockToBlockchain 方法已移至服务，组件不再直接拥有此方法
  // 但如果需要，祖父组件也可以通过服务来触发操作
  // public triggerBlockchainAction(message: string): void {
  //   this.blockchainService.sendBlockToBlockchain(message);
  // }
}