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

Posted 2023-03-13

【中文标题】Angular 5通过服务在组件之间进行通信

【英文标题】：Angular 5 communicating between components through service

【发布时间】：2018-08-07 18:40:39

【问题描述】：

我正在开发一个 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();

分别（这个在初始化）：

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

因此，我无法真正知道 api 何时更新，我想在 saveCandidate() 方法执行操作后更新列表。

如何在一个组件提交到服务后用新的 api 数据更新一个组件？

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

【问题讨论】：

试试这个：***.com/a/48902022/6808483

我在这里给出了一个类似的例子***.com/questions/49007399/…

看看这个：***.com/questions/48760281/…

【参考方案1】：

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

【参考方案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); );

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

【讨论】：

非常感谢。这似乎是它。猜猜我有很多关于角度的学习。