Angular非关联组件带返回值的通信实现方案咨询

要实现Component1的function1获取Component2的function2返回值，可通过中间服务结合RxJS和Promise实现异步通信，以下是具体代码修改：

1. ComponentService 实现 #

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

@Injectable({
  providedIn: 'root'
})
export class ComponentService {
  // 传递请求的Subject，携带参数和响应回调Subject
  private requestSubject = new Subject<{ parameter: string; responseSubject: Subject<string> }>();
  // 暴露给Component2的请求监听流
  request$ = this.requestSubject.asObservable();

  // 发起请求，返回Promise等待响应
  sendRequest(parameter: string): Promise<string> {
    const responseSubject = new Subject<string>();
    this.requestSubject.next({ parameter, responseSubject });
    return responseSubject.toPromise();
  }

  // 发送响应结果到请求方
  sendResponse(response: string, responseSubject: Subject<string>) {
    responseSubject.next(response);
    responseSubject.complete();
  }
}

2. Component1 修改 #

注入ComponentService，将function1改为异步方法，通过await等待返回值：

import { Component, OnInit } from '@angular/core';
import { ComponentService } from '../component.service';

@Component({
  selector: 'component1',
  template: ''
})
export class Component1 implements OnInit {
    
  constructor(private componentService: ComponentService) {}

  ngOnInit() {}

  async function1() {
    // do something
    
    const parameter = "some Parameter";
    const returnValue = await this.componentService.sendRequest(parameter);

    // do something else with returnValue
    console.log(returnValue);
  }
}

3. Component2 修改 #

注入ComponentService，监听请求流，处理后返回结果，同时记得销毁订阅防止内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ComponentService } from '../component.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'component2',
  template: ''
})
export class Component2 implements OnInit, OnDestroy {
  private requestSubscription?: Subscription;
    
  constructor(private componentService: ComponentService) {}

  ngOnInit() {
    // 监听服务发来的请求
    this.requestSubscription = this.componentService.request$.subscribe(({ parameter, responseSubject }) => {
      const result = this.function2(parameter);
      // 将结果返回给请求方
      this.componentService.sendResponse(result, responseSubject);
    });
  }

  ngOnDestroy() {
    // 销毁订阅
    this.requestSubscription?.unsubscribe();
  }

  function2(parameter: string) {
    // do something
    
    return parameter + "did something with it";
  }
}

方案说明 #

• 服务通过requestSubject传递请求信息，包含参数和用于响应的Subject
• Component1调用sendRequest后，会等待Component2处理完成并返回结果
• Component2监听请求流，执行自身业务逻辑后，通过服务将结果回传给Component1
• 异步逻辑通过async/await封装，让Component1的代码保持同步写法的可读性

内容的提问来源于stack exchange，提问作者Cardo leth