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

时间:2018-02-28 00:31:22

标签: angular angular-services angular-components

我正在开发一个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不是一种方法。也许我误用了它们。

2 个答案:

答案 0 :(得分:2)

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

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

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

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

    这可以解决您的问题。

答案 1 :(得分:1)

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