Как прослушать http-вызов в службе из компонента в angular?

Вы познакомились с предметами в angular? Я думаю, что это идеальный случай для субъекта.

Субъекты сами являются наблюдаемыми, но их отличает то, что они также являются наблюдателями. Что это значит? Это означает, что субъект может передавать данные, помимо возможности подписаться.

Определение темы (в сервисе выборки статей): let fetchSubject= new Subject<string>();

Выдача данных (передача идентификатора с боковой панели): fetchSubject.next("Eureka");

Подписка на изменения в теме: fetchSubject.subscribe((data) => { console.info("Subscriber got data >>>>> "+ data); });

Основываясь на полученном идентификаторе, вы можете сделать http-вызов. Результат можно передать субъекту, который передаст его всем подписчикам. В этом конкретном случае вам может понадобиться немного поработать над потоком.

Грубый поток, который я могу визуализировать, заключается в том, что вы можете передать результат http-вызова в теме, используя subject.next. Как только данные в субъекте будут изменены, он сообщит о новых данных везде, где вы захотите их использовать. Надеюсь, это может быть полезно для вас.

Взгляните на эту фотографию вашего стекблиц. Вам нужно убедиться, что подписчик получает http-запрос, и оттуда присвоить результат нужной переменной.

Подписка на модуль HTTP означает, что как только вы получите ответ, подписка будет завершена и уничтожена по умолчанию. Поэтому ваша текущая логика никогда не сработает. Еще одна проблема, которую я видел, была здесь

updateID(id) {
    this.fetchArticlesService.fetchArticles(id)
  }

To execute the observable you have created and begin receiving notifications, you call its subscribe() method, passing an observer.

Другими словами, этот метод никогда не сработает, так как для его запуска требуется подписка на наблюдаемый объект. Подробнее об этом здесь

Решение вашей проблемы состоит в том, чтобы создать еще один наблюдаемый объект (Тема), а затем подписаться на него:

export class FetchArticlesService {
  public articles: Subject<any> = new Subject();

  constructor(
    private http: HttpClient
  ) { }

  fetchArticles(id) {
    return this.http.get('http://127.0.0.1:5000/query/' + id).pipe(
      map((result) => {
         this.articles.next(result);
      }));
  }

}

Теперь в вашем компоненте, чтобы вызвать API и загрузить только что созданный вами наблюдатель с новыми данными, вы должны сделать это:

this.fetchArticlesService.fetchArticles(id).subscribe();

А в вашем content.component.ts или любом другом компоненте вы должны подписаться на articles. Вот как вы можете автоматически «обновлять» данные ответа в нескольких местах.

this.fetchArticlesService.articles.subscribe((res) => console.info(res));

Проверьте решение здесь:https://stackblitz.com/edit/angular-edotfc

ВАЖНЫЙ: Каждый раз, когда вы «убиваете» компонент, имеющий эту подписку, также важно остановить подписку, чтобы предотвратить утечку памяти. Однако, если ваш компонент активен все время (например, панель навигации, боковая панель и компоненты этого типа), в этом нет необходимости. Лучшим способом было бы уничтожить его внутри нгондестрой

ngOnDestroy() {
  this.fetchArticlesService.articles.unsubscribe();
}