Angular 5, взаимодействующий между компонентами через службу

я работаю над приложением 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 — это не метод. Возможно, я неправильно их использовал.


angular angular-components angular-services
person Gabriel    schedule 28.02.2018    source источник
comment
Попробуйте это: stackoverflow.com/a/48902022/6808483   -  person Aakriti.G    schedule 28.02.2018
comment
Я привел аналогичный пример здесь stackoverflow.com/questions/49007399/   -  person GSSwain    schedule 28.02.2018
comment
Посмотрите на это: stackoverflow.com/questions/48760281/   -  person S K    schedule 28.02.2018

Ответы (2)


arrow_upward
3
arrow_downward

Метод, который вы пробовали (то есть Subject), является правильным способом решения этой проблемы.

Используйте эта ссылка для лучшего понимания 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); });

    Это должно решить вашу проблему.

person Arjun Panicker    schedule 28.02.2018
comment
Большое тебе спасибо. Кажется, это было так. Думаю, мне нужно многому научиться на angular. - person Gabriel; 28.02.2018

arrow_upward
2
arrow_downward

Вы можете создать службу с BehaviorSubject, которая будет хранить объект состояния, например. сборник кандидатов. Один компонент будет использовать next() для субъекта, чтобы добавить кандидата, а другой подпишется, чтобы получить текущий список кандидатов. Я записал 20-минутное видео, которое поможет вам понять, как это можно реализовать: https://www.youtube.com/watch?v=NYNEH_k0e_4

person Yakov Fain    schedule 28.02.2018