角度RxJSは、二重のAPIは、私は再びそれを実行せずにRxJSストリームの結果を再利用したい

Question

呼び出す防ぎます。

コンポーネントには、入力ストリーム（query$とcategory$）が必要です。私は同じAPIソースを共有する2つのストリームに変換したい。今は2つのリクエストをしています。私は1つの要求しか持たない。

簡体コード：

this.searchResults$ = this.query$ 
    .switchMap((query) => this.httpClient.get(`/whatever?q=${query}`)); 

this.filteredSearchResults$ = Observable 
    .combineLatest(this.searchResults$, this.category$) 
    .filter(([ searchResults, category ]) => { 
    // Code to make a subset 

    return ['a', 'subset']; 
    }); 

私は同じコンポーネントににsearchResults $とfilteredSearchResults $の両方を消費：2つのAPIコールがある理由

<ng-container *ngIf="(searchResults$ | async) as searchResults"> 
    <ng-container *ngIf="(filteredSearchResults$ | async) as filteredSearchResults"> 
    </ng-container> 
</ng-container> 

今、私は理解しています。私はちょうどそれを防ぐための方法が表示されません。

Answer 1

あなたはshareを使用する場合があります：それは今、部分的に働いている

this.searchResults$ = this.query$ 
    .switchMap((query) => this.httpClient.get(`/whatever?q=${query}`)) 
    .share(); <-- HERE 

this.filteredSearchResults$ = Observable 
    .combineLatest(this.searchResults$, this.category$) 
    .filter(([ searchResults, category ]) => { 
    // Code to make a subset 

    return ['a', 'subset']; 
    });