Angular - 具有返回值的不相关组件之间的通信

Question

我正在尝试重组我的项目，为此我正在研究如何在不相关的组件之间进行通信，并等待来自被调用的 function 的返回值。

所以假设我有一个component1和一个function1（），还有一个component2和一个function2（）。 介于两者之间的是component.service。

组件1：

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

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

  ngOnInit() {
    
  }

  function1() {
    //do something
    
    let parameter: any = "some Parameter";
    let returnValue = function2(parameter);

    //do something else
  }

}

组件2：

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

@Component({
  selector: 'component2',
  template: ''
})
export class Component2 implements OnInit {
    
  constructor() {}

  ngOnInit() {
    
  }

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

}

组件服务：

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

@Injectable({
  providedIn: 'root'
})
export class ComponentService{

  constructor() { }

  //???
}

如何实现这种结构，以便 function1() 可以使用 function2() 的返回值。 我必须如何构建服务？

提前致谢。

Answer 1

你永远不会从component1调用位于component2内部的function。 这就是创建该服务的目的。 您将两个组件所需的每个数据/逻辑都存储在服务中并将服务注入两个组件。

    @Injectable({
      providedIn: 'root'
    })
    export class ComponentService{
    
      constructor() { }
    
      getSomeData() {
        return '' // return what do you need
 }
    }

和每个组件：

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

  ngOnInit() {
    
  }

  function2(parameter: string) {
    //do something
    
    return this.componentService.getSomeData()
  }

}