Angular5 组件之间通过服务进行通信

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(..the http 请求)。但是 Observable.next 不是一种方法。可能是我用错了。

Answer 1

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

Answer 2

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

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

在服务中声明主题
在您要发布数据的组件中，使用代码 this.candidatesService.mySubject.next('Data Changed').

'Data Changed'

在您列出数据的组件中订阅此 Subject 并在订阅方法中调用您的服务方法 get 您的数据，如下所示：

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

这应该可以解决您的问题。

Angular5 组件之间通过服务进行通信

Angular 5 communicating between components through service

angular-services

angular-components

angular