我該如何從角度組件偵聽服務中的http調用？

Question

我只是從angular開始，我需要一些有關從組件中偵聽服務中新的http調用的幫助。 最初，我使用fetch-article.service從content.component.ts通過ngOnInit通過api調用獲取數據（返回數組），后來當另一個組件（ sidebar.component.ts ）調用updateID時，它從fetch-article.service調用了相同的函數fetch-article.service 。 我想做的是，一旦從fetch-article.service發出新的http請求， content.component.ts的items變量應具有新獲取的數據的值。

content.component.ts：

export class ContentComponent implements OnInit {
  items = [];

  constructor(
    private fetchArticlesService: FetchArticlesService) {}

  ngOnInit() {
    this.getArticlesbyID('123')
    .subscribe(result => {
     console.log('test')
  });

  getArticlesbyID(id){
  return this.fetchArticlesService.fetchArticles(id).pipe(map(
    fetchArticlesService => {
      this.items = Object(fetchArticlesService);
    })
  )}
}

在我的fetch-article.service.ts中，我有：

export class FetchArticlesService {

  fetchArticles(id) {
    return this.http.get('http://127.0.0.1:5000/query/' + id);
  }

  constructor(
    private http: HttpClient
  ) { }
}

sidebar.component.ts：

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

請幫助我。 我剛開始使用Angular。 Stackblitz代碼： https ：//stackblitz.com/edit/angular-vyotee

Answer 1

對HTTP模塊的訂閱意味着一旦獲得響應，訂閱將默認完成並被銷毀。 因此，您當前的邏輯將永遠無法工作。 我看到的另一個問題是在這里

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

要執行您創建的可觀察對象並開始接收通知，請調用它的subscribe（）方法，並傳遞一個觀察者。

換句話說，此方法將永遠不會觸發，因為必須先訂閱可觀察的內容才能觸發它。 在這里了解更多

您的問題的解決方案是創建另一個可觀察的對象（ Subject ），然后訂閱該對象：

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.log(res));

在此處檢查解決方案： https : //stackblitz.com/edit/angular-edotfc

重要說明：每當您“殺死”具有該訂閱的組件時，停止訂閱以防止內存泄漏也很重要。 但是，如果您的組件一直處於活動狀態（例如導航欄，邊欄和該類型的組件），則無需這樣做。 最好的方法是在ngOnDestroy內部銷毀它

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

Answer 2

是否向您介紹了角度課程？ 我認為這是主題的理想案例。

主題本身就是可觀察的對象，但使它們與眾不同的是它們也是觀察者。 這意味着什么？ 這意味着除了具有訂閱能力之外，主題還可以發出數據。

定義主題（在fetch-article-service中）： let fetchSubject= new Subject<string>();

發出數據（從側邊欄傳遞ID）： fetchSubject.next("Eureka");

訂閱主題的更改： fetchSubject.subscribe((data) => { console.log("Subscriber got data >>>>> "+ data); });

根據收到的ID，您可以在此處進行http調用。 結果可以傳遞給主題，該主題將傳遞給所有訂戶。 對於這種特殊情況，您可能需要對流程進行一些處理。

我可以看到的大致流程是，您可以使用subject.next在主題中傳遞http調用的結果。 主題中的數據一旦更改，它將通知新數據到您可能要使用的任何地方。 希望這對您有用。

Answer 3

看看這張堆疊閃電戰的照片。 您需要確保訂閱者收到一個http請求，然后將結果分配給所需的變量。