Question

我正在开发一个Angular 5应用程序，我有一个用于存储数据的API。问题是我有两个组件，一个用于显示数据，另一个用于发布数据。

它们都通过具有两个功能的服务与API交互：

addCandidate(candidate: Candidate): Observable<Candidate> {
  this.candidatesList.next(this.http.get(this.apiUrl));
  return this.http.post<Candidate>(this.apiUrl, candidate, httpOptions);
} 

listCandidates(): Observable<Candidate[]> {
  return this.http.get(this.apiUrl).map(res => <Candidate[]>res);
}

组件具有订阅服务的方法：

saveCandidate(): void {
  if(this.candidate.skills.indexOf(', ') >= 0) {
    this.candidate.skills = (<string>this.candidate.skills).split(', '); 
  }
  this.candidatesService.addCandidate(this.candidate).subscribe();
}

分别（这个是在init上）：

ngOnInit() {
  this.candidatesService.listCandidates().subscribe(candidates => this.candidates = candidates);
}

所以，因此我真的不知道api何时更新，我想在saveCandidate（）方法采取行动后更新列表。

如何使用新的api数据更新一个组件，然后再提交给服务？

旁注：我尝试使用rxjs Subject.asObservable（）。next（.. http请求）。但是Observable.next不是一种方法。也许我误用了它们。

Answer 1

您尝试的方法（即Subject）是解决此问题的正确方法。

使用this link来提高您对Subject的理解，并遵循以下几点：

在服务中声明主题
在发布数据的组件中，使用代码'Data Changed'让主题使用字符串值（例如，this.candidatesService.mySubject.next('Data Changed')）发出事件。
在您列出数据的组件中订阅此Subject，并在订阅方法中将您的服务方法调用get，如下所示：

this.candidatesService.mySubject.subscribe((value) => { this.candidatesService.listCandidates().subscribe(candidates => this.candidates = candidates); });

这可以解决您的问题。

Answer 2

您可以使用将存储状态对象的BehaviorSubject创建服务，例如：候选人集合。一个组件将使用该主题上的next（）来添加候选者，另一个组件将订阅以获取当前候选者列表。我录制了一段20分钟的视频，可以帮助您了解如何实施：https://www.youtube.com/watch?v=NYNEH_k0e_4

Angular 5通过服务在组件之间进行通信

2 个答案: