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

import { Component, Output, EventEmitter } from '@angular/core';
// 假设 MessageComponent 接口依然存在，用于类型约束
import { MessageComponent } from '../department-message/department-message.component';

@Component({
  selector: 'app-buyer-message',
  template: `
    <textarea rows="3" cols="40" #messageInput></textarea>
    <button (click)="sendMessage(messageInput.value)">发送消息</button>
  `
})
export class BuyerMessageComponent implements MessageComponent {
  // 定义一个输出事件，当消息发送时触发
  @Output() messageSent = new EventEmitter<string>();

  sendMessage(message: string): void {
    // 触发 messageSent 事件，并将消息作为参数传递
    this.messageSent.emit(message);
  }
}

<ng-container *ngIf="department" [ngSwitch]="department.id">
  <!-- ... 其他情况 ... -->
  <!-- 监听 app-buyer-message 的 messageSent 事件，并转发 -->
  <app-buyer-message *ngSwitchCase="2" (messageSent)="forwardMessage($event)"></app-buyer-message>
  <!-- ... 其他情况 ... -->
</ng-container>

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Department } from 'path/to/department.model'; // 假设 Department 模型路径

export interface MessageComponent {
  sendMessage(message: string): void;
}

@Component({
  selector: 'app-department-message',
  templateUrl: './department-message.component.html', // 引用上述HTML模板
  // ...
})
export class DepartmentMessageComponent {
  @Input() department: Department = {} as Department;
  // 定义一个输出事件，用于向上级组件转发
  @Output() messageForwarded = new EventEmitter<string>();

  forwardMessage(message: string): void {
    // 接收到子组件的事件后，再次触发自己的事件向上级组件转发
    this.messageForwarded.emit(message);
  }
}

<mat-card *ngIf="department">
  <h1>{{ department.name }}</h1>
  <!-- 监听 app-department-message 的 messageForwarded 事件，并调用自身方法 -->
  <app-department-message [department]="department" (messageForwarded)="sendBlockToBlockchain($event)"></app-department-message>
</mat-card>

import { Component } from '@angular/core';
import { Department } from 'path/to/department.model'; // 假设 Department 模型路径

@Component({
  selector: 'app-department',
  // ...
})
export class DepartmentComponent {
  department: Department = {} as Department;

  public sendBlockToBlockchain(message: string): void {
    console.log('祖父组件收到消息并发送到区块链:', message);
    // 这里是实际的区块链发送逻辑
  }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // 使服务在整个应用中作为单例提供
})
export class BlockchainService {
  // 可以使用 BehaviorSubject 来管理和暴露区块链操作的状态
  private _lastBlockchainMessage = new BehaviorSubject<string | null>(null);
  public readonly lastBlockchainMessage$: Observable<string | null> = this._lastBlockchainMessage.asObservable();

  constructor() { }

  /**
   * 封装将消息发送到区块链的逻辑。
   * 这个方法现在由服务“拥有”。
   * @param message 要发送的消息
   */
  sendBlockToBlockchain(message: string): void {
    console.log('BlockchainService: 正在将消息发送到区块链:', message);
    // 实际的区块链发送逻辑（例如：调用API）
    // ...

    // 更新状态，以便任何订阅者都能收到最新消息
    this._lastBlockchainMessage.next(message);
  }

  // 祖父组件如果需要，可以订阅或获取服务的当前状态
  getCurrentBlockchainState(): string | null {
    return this._lastBlockchainMessage.value;
  }
}

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" #messageInput></textarea>
    <button (click)="sendMessage(messageInput.value)">发送消息</button>
  `
})
export class BuyerMessageComponent implements MessageComponent {
  // 通过依赖注入获取 BlockchainService 实例
  constructor(private blockchainService: BlockchainService) {}

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

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Department } from 'path/to/department.model';
import { BlockchainService } from '../../services/blockchain.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-department',
  // ...
})
export class DepartmentComponent implements OnInit, OnDestroy {
  department: Department = {} as Department;
  private blockchainMessageSubscription: Subscription;
  public lastReceivedBlockchainMessage: string | null = null;

  constructor(private blockchainService: BlockchainService) {}

  ngOnInit(): void {
    // 祖父组件现在可以订阅服务中的状态变化
    this.blockchainMessageSubscription = this.blockchainService.lastBlockchainMessage$.subscribe(message => {
      if (message) {
        console.log('祖父组件通过服务感知到区块链消息:', message);
        this.lastReceivedBlockchainMessage = message;
        // 祖父组件可以根据服务中的最新状态更新自己的UI或执行其他逻辑
      }
    });
  }

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

  // 如果祖父组件仍然需要发起区块链操作，它也会通过服务进行
  // public triggerBlockchainAction(message: string): void {
  //   this.blockchainService.sendBlockToBlockchain(message);
  // }
}