角度 - サービスのオブザーバー

Question

私はかなり角度のあるシーンに新しいです、そして、私はいくつかの予期しない振る舞いから私の髪を引っ張り出しています。

私は、このコールがルートからページロードで2回実行されている方法を停止することができます

queryList(): Observable<ApiList[]> { 
    if(this.loadingApiList == true) { 
     return Observable.of(this.queryListResult); 
    } 
    this.loadingApiList = true; 
    return this._http 
     .get('samples/apiList.json').map((response: Response) => <ApiList[]> response.json()) 
     .do(data => { 
     this.queryListResult = data; 
     }); 
} 

私IntegrationsServiceに次のコードを持っていますか？

コンポーネントは、このメソッドを呼び出し、ナビゲーション中にリストを作成し、また、別のコンポーネントには、以下の方法で同じサービスを呼び出します。

getApiName(IT_ID:number) { 
    console.log(this.queryListResult); 
    let obj = this.queryListResult.find(o => o.IT_ID == IT_ID); 
    if(obj) { 
     return obj.IT_Name; 
    } 
    return false; 
} 

私が使用したときに、私はしかし、ルートを使用していないとき、これは完璧に動作しますルートのgetApiNameは未定義の結果を返します。

解決オブジェクトも使用しましたが、問題は解決しましたが、jsonファイルに2つの呼び出しが行われました。これは私が使用したものです。

resolve(route: ActivatedRouteSnapshot, state:RouterStateSnapshot):Observable<any>{ 
    return this._service.queryList() // We need this to finish first. 
    } 

は、私は本当に今こだわって - 私はそれが決意を使用して作業を取得することができますが、それは.jsonを2回呼び出しを持つ無駄です。

これを行う正しい方法は何ですか？

Answer 1

ルートからのページロードでこのコールが2回実行されるのを止める方法を教えてください。

これは、2回購読しているために発生しています。観測可能なオブジェクトは怠惰で、.subscribe()で呼び出すたびに実行が開始されます。あなたの場合は、ネットワーク要求がトリガーされます。オブザーバブルの.subscribe()は、.call()、または単に関数の場合は()と考えることができます。関数を呼び出すたびに、その関数が実行されます。

これを念頭に置いて、発生する動作が予想されます。これを解決するにはさまざまな方法がありますが、類似していますが、ユースケースに応じて少し異なります。すなわち、購読と購読解除の正確なタイミング。一般に、あなたが探しているのはmulticastingです。

最も単純な形式のマルチキャストは、the .shared() operatorを使用しています。 official docsより。しかし強調（私を）注意：

はマルチキャスト（株）元観測可能な、新しい観測を返します。 少なくとも1つのサブスクライバが存在する限り、このオブザーバブルはサブスクライブされ、データを送信します。すべての加入者が登録を解除すると、Observableソースから退会します。 Observableはマルチキャストであるため、ストリームをホットにします。これは.publish().refCount()の別名です。

BehvaiorSubjectの作成に興味があるのは、「現在の値」という概念です。 API呼び出しは何も返しません。単にリクエストをトリガーします。ここで

は、概念実証です：

export class Service { 

    public data$ = new BehaviorSubject(null); 

    public get() { 
    this.http.get(`some/data`).subscribe(data => this.data$.next(data)) 
    } 

} 

nullはdata$に加入したときに、すべての加入者が同期取得する値です。このように使うことができます。

もちろん

this.get() 
this.data$.subscribe(data => /* ... */) 

、あなたがよりよいものにこれをラップし、さらにキャッシュのようなものを実装を開始することができ、など

---

いくつかの便利なリンク：

• http://blog.kwintenp.com/multicasting-operators-in-rxjs/
• http://javascript.tutorialhorizon.com/2017/04/04/understanding-the-rx-multicast-operator/
• What's the difference between publish and multicast operator in rxjs 5?