Angular组件通信：从孙子组件调用祖父组件方法的策略与实践

import { Component, Output, EventEmitter } from '@angular/core';
import { MessageComponent } from '../department-message/department-message.component';

@Component({
  selector: 'app-buyer-message',
  templateUrl: './buyer-message.component.html',
  styleUrls: ['./buyer-message.component.css']
})
export class BuyerMessageComponent implements MessageComponent {
  // 定义一个输出事件，命名应具有描述性，例如 messageSent 或 blockRequested
  @Output() messageSent = new EventEmitter<string>();

  sendMessage(message: string): void {
    // 当消息需要发送时，发出事件
    this.messageSent.emit(message);
  }
}

<textarea rows="3" cols="40" #messageInput></textarea>
<button (click)="sendMessage(messageInput.value)">发送消息</button>

<ng-container *ngIf="department" [ngSwitch]="department.id">
  <!-- ... 其他组件 ... -->
  <!-- 监听 buyer-message 组件的 messageSent 事件，并调用 forwardMessage 方法 -->
  <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',
  styleUrls: ['./department-message.component.css']
})
export class DepartmentMessageComponent {
  @Input() department: Department = {} as Department;

  // 同样定义一个输出事件，用于向祖父组件转发
  @Output() blockRequested = new EventEmitter<string>();

  forwardMessage(message: string): void {
    // 捕获孙子组件的事件，并以自己的事件形式向上转发
    this.blockRequested.emit(message);
  }
}

<mat-card *ngIf="department">
  <h1>{{ department.name }}</h1>
  <!-- 监听 department-message 组件的 blockRequested 事件 -->
  <app-department-message [department]="department" (blockRequested)="sendBlockToBlockchain($event)"></app-department-message>
</mat-card>

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

@Component({
  selector: 'app-department',
  templateUrl: './department.component.html',
  styleUrls: ['./department.component.css']
})
export class DepartmentComponent {
  department: Department = {} as Department;

  public sendBlockToBlockchain(message: string): void {
    console.log('祖父组件收到消息并执行方法:', message);
    // 这里是实际的业务逻辑，例如调用区块链服务
  }
}

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

@Injectable({
  providedIn: 'root' // 确保服务在整个应用中是单例的
})
export class BlockchainService {
  // 如果需要，可以使用 Subject 或 BehaviorSubject 来管理状态或通知组件
  private _blockSentSource = new Subject<string>();
  blockSent$ = this._blockSentSource.asObservable();

  constructor() { }

  public sendBlockToBlockchain(message: string): void {
    console.log('区块链服务收到消息并处理:', message);
    // 实际的区块链交互逻辑
    // ...
    this._blockSentSource.next(message); // 通知所有订阅者
  }

  // 如果祖父组件需要访问区块链服务的其他状态，可以提供相应的方法
  public getBlockchainStatus(): string {
    return 'Blockchain is active.';
  }
}

import { Component } from '@angular/core';
import { MessageComponent } from '../department-message/department-message.component';
import { BlockchainService } from '../../services/blockchain.service'; // 假设服务路径

@Component({
  selector: 'app-buyer-message',
  templateUrl: './buyer-message.component.html',
  styleUrls: ['./buyer-message.component.css']
})
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',
  templateUrl: './department.component.html',
  styleUrls: ['./department.component.css']
})
export class DepartmentComponent implements OnInit, OnDestroy {
  department: Department = {} as Department;
  private blockSubscription: Subscription | undefined;

  // 注入 BlockchainService
  constructor(private blockchainService: BlockchainService) {}

  ngOnInit(): void {
    // 祖父组件可以订阅服务的事件，以响应区块链操作
    this.blockSubscription = this.blockchainService.blockSent$.subscribe(message => {
      console.log('祖父组件通过服务订阅到区块链消息:', message);
      // 根据需要更新UI或执行其他逻辑
    });
    // 祖父组件不再需要 sendBlockToBlockchain 方法，因为逻辑已移至服务
    // 但如果需要获取服务中的某些状态，可以直接调用服务方法
    console.log(this.blockchainService.getBlockchainStatus());
  }

  ngOnDestroy(): void {
    this.blockSubscription?.unsubscribe();
  }
}