使用来自一个组件的不同数据更新多个组件答案

【问题标题】：Update multiple components with different data from one component使用来自一个组件的不同数据更新多个组件
【发布时间】：2020-02-10 22:44:39
【问题描述】：

我正在寻找解决 Angular 8 问题的方法。

假设我有三个组件，SearchFieldComponent、ResultFieldComponent1 和 ResultFieldComponent2。

在 SearchField 组件中，我输入一些内容，单击一个按钮并执行多个 GET 请求。这些 GET 请求称为 request1 和 request2。

如何用 request1 的数据更新 ResultFieldComponent1，用 request2 的数据更新 ResultFieldComponent2？我可以使用哪种沟通方式？

我一直在尝试将所有三个组件都视为兄弟组件，但是让 SearchFieldComponent 成为其他组件的父组件会更好吗？

【问题讨论】：

通常形式由某种数据模型支持 - 例如普通对象。根据请求结果更新该对象，您就完成了。
兄弟组件之间的通信例如：stackoverflow.com/questions/35884451/…

标签： angular angular8

【解决方案1】：

搜索字段组件

    export class SearchFieldComponent {

      ResultFieldComponent1 : Subject<any> = new Subject();
      ResultFieldComponent2 : Subject<any> = new Subject();

     doApiCall {

      this.ResultFieldComponent1.next(response);
      this.ResultFieldComponent2.next(response);

    }

}

在模板中

<div>
   <result-field-component1 [ResultFieldComponent1]="ResultFieldComponent1" ></result-field-component1>
   <result-field-component1 [ResultFieldComponent2]="ResultFieldComponent2"></result-field-component1>
</div>


export class ResultFieldComponent1 {
@Input() ResultFieldComponent1: Subject<any>;

 ngOnInt(){
   this.ResultFieldComponent1.subscribe(data=>{

   // do with your response.

})
}
}

ResultFieldComponent2 组件也是如此。

【讨论】：

【解决方案2】：

我相信SearchFieldComponent 组件应该被视为父组件。每当我们点击触发 2 个请求的按钮时，我们应该将它们存储在 2 个流变量中，并将它们作为输入传递给 ResultFieldComponent2 和 ResultFieldComponent1。

onClick() {
   this.results1$ = this.service.getDataForComponent1();
   this.results2$ = this.service.getDataForComponent2();
}

在模板中

<div>
   <result-field-component1 data="results1$"></result-field-component1>
   <result-field-component1 data="results2$"></result-field-component1>
</div>

通过这种方式，我们可以让 ResultFieldComponents 变得笨拙，让 Search Component 变得聪明。请参考smart vs dumb架构

【讨论】：

【解决方案3】：

创建一个共享服务并使用主题来发出和订阅类似的东西

@Injectable()
export class SharedService{
$firstServiceResponseSource=new Subject();
$secondServiceResponseSource=new Subject();

firstServiceResponse=this.$firstServiceResponseSource.asObservable();
secondServiceResponse=this.$secondServiceResponseSource.asObservable();

sendFirstResponse(data){
this.$firstServiceResponseSource.next(data)
}

sendSecondResponse(data){
this.$secondServiceResponseSource.next(data)
}

}

然后在你的第一个和第二个组件中订阅

 ngOnInit(){
    this.sharedService.firstServiceResponse.subscribe(data=>{
    //here you will get the data
    })
     }
....//same thing in second component

并在你的父组件中发出它就像

this.http.get('fistApi').subscribe((data)=>{
this.sharedService.sendFirstServiceResponse(data)
})

//same thing for second api response

【讨论】：