将结果数组 forkJoin 传递给 Angular 中的多个组件答案

【问题标题】：Passing the resulting array of forkJoin to more than one component in Angular将结果数组 forkJoin 传递给 Angular 中的多个组件
【发布时间】：2019-11-06 03:26:20
【问题描述】：

我有一个服务，它使用这样的 forkjoin 向服务器发出 4 个 http 请求

 getData():Observable<any[]>{
    const response1=this.http.get(URL+'/1')
    const response2=this.http.get(URL+'/2')
    const response3=this.http.get(URL+'/3')
    const response4=this.http.get(URL+'/4')
    console.log("recibido")
    this.data= forkJoin([response1, response2, response3,response4])
    return this.data
}

所以我想将这个生成的 Observable 数组分享给 2 到必须以不同方式使用 forkJoin 结果的组件。显然调用该函数两次是行不通的，因为 Angular 不允许我同时明确地发出两个 HTTP 请求

我之前使用过@Output 装饰器来发送数据，

 data: dataChart
  @Output() change: EventEmitter<dataChart> = new EventEmitter()
  toggleData(poData: dataChart) {
    console.log('do toggle')
    this.data = poData;
    //this.isOpen = !this.isOpen;
    this.change.emit(this.data);
    console.log(this.data)
  }

我在一个组件上调用了 toggleData() 来设置变量 this.data，然后我调用了

this.service.change.subscribe(data=>{ 
 //Handle the data
})

在 4 个组件中能够操作来自第一个组件的数据。

注意所有组件都是兄弟姐妹

是否可以使用 forkJoin 做到这一点？是否有其他方法可以从 http 服务器获取数据并将其结果用于各种组件？

【问题讨论】：

您可以创建另一个主题并调用下一个方法。因此您可以在 2 个不同的组件中使用此主题
所以我必须将 getData 函数中使用的数据定义为主题？
没有。您可以一次调用您的函数并将输出存储在服务中并从多个组件共享它。或者您可以创建另一个主题并从 Http forkJoin 订阅方法中调用下一个方法。这样，您所有监听该主题的组件都会收到通知.也可以有条件地编写forkjoin，因此如果数据已经存在，您可以避免http请求并仅返回现有数据
我如何将请求的输出存储在变量中，以便我可以使用主题
@VictorDanielSantillnChalico 使用 BehaviorSubject 来完成这项工作，因为它将存储以前的值

标签： angular http rxjs

【解决方案1】：

实际上你不需要在这里使用主题。但是你需要做两件事：

1：不要使用函数，而是使用这样的属性：

public data = forkJoin([this.http.get(URL+'/1'), ...])

顺便说一句。 forkJoin 还支持传递对象以获得更好的可读性，例如

public data = forkJoin({someProp: this.http.get(URL+'/1'), ...})

您需要使用适当的多播机制，具体取决于您的使用情况。如果您同时订阅 Observable，它可能是 share，否则是 shareReplay(1)，所以它看起来像这样：

public data = forkJoin([this.http.get(URL+'/1'), ...]).pipe(
   share()
)

RxJS 中的多播运算符也在底层使用 Subject，但您不必管理它的生命周期，而且这与您的源 observable 紧密耦合。主题往往会被滥用并被到处调用 next 污染。

【讨论】：