2016-07-14 18 views
5

ちょうどAngular 2でプログラミングを始め、subscribe、Subject、BehaviorSubjectについて学習し始めました。現在、私はサービスに格納された値を取得するために複数のサブスクリプションを持っており、コンポーネントに放出されています。私のアプリケーションは動作していますが、私はそれが非常に非効率的であることを知っています。複数のObservablesをAngular 2で一緒に結合する方法

this.threatService.minLimitChange$.subscribe(min => { this.min = min; this.getSession();}); 
this.threatService.maxLimitChange$.subscribe(max => { this.max = max; this.getSession();}); 

(等関数のgetSession()各時間単一の値を取得し、呼び出し複数の他5)私のthreat.serviceで

を:

それが私のコンポーネントに手から得たこと
private minLimitChangeSource = new BehaviorSubject<number>(this.min); 
private maxLimitChangeSource = new BehaviorSubject<number>(this.max); 
minLimitChange$ = this.minLimitChangeSource.asObservable(); 
maxLimitChange$ = this.maxLimitChangeSource.asObservable(); 

は、だから私は試してみた:私の目的はただresは何をテストすることだった

this.threatService.minLimitChange$.concat(this.threatService.maxLimitChange$).subscribe(res => console.log(res)); 

私は2つの値にアクセスする方法がわからないので...しかし、私は私のコンソールでこれを取得しています。 ;/

TypeError: this.threatService.minLimitChange$.merge is not a function. (In 'this.threatService.minLimitChange$.concat(this.threatService.maxLimitChange$)', 'this.threatService.minLimitChange$.concat' is undefined) 

最終的に、私はのgetSession()は私のサービスから必要と一度その機能を実行するすべての値を取得したいのですが。 concat、merge、またはforkJoinを使用してサブスクリプションを組み合わせる方法についてのヘルプや説明を本当に感謝します。ありがとうございました!

答えて

10

あなたは1に2つの観察可能なストリームを組み合わせることObservable.combineLatestを使用することができます。

combineObs = obs1.combineLatest(obs2, 
    (val1, val2) => { 
    return {val1: val1, val2: val2}; 
    }); 

仕事plunker:私は見http://plnkr.co/edit/mmCzEmdKexpaWNM53me9?p=preview

+0

ああ!しかし、私が望むものに近いと思われますが、htmlの{{}}メソッドで値を使用しません。私のアプリケーションは実際には、UIコンポーネントのスライダに従ってデータポイントを表示するチャートジェネレータです。したがって、データフロー:** UIコンポーネントのスライダ**は最大値と最小値を送信します。**サービス**は、加入者にストアして出力します。**チャートコンポーネント**は、これらの値で関数を実行します。 したがって、チャートのコンポーネントにcombineLatestを配置する場合、コンポーネントの最大値と最小値にローカルに割り当てる方法を教えてください。 – mshantic

+0

添付のplnkrリンクを確認してください。基本的に、2つのストリームを1つに結合し、3つ目のストリームはソースストリームのいずれかが新しい値を持つたびに新しい値を出力します。 2.結合されたストリームを聞き、結合されたデータに基づいてローカルデータを入力します。私はplnkrで両方を実演しました。 –

+1

ありがとう!これは、無駄に動作し、多くの冗長コードを削減します。 私は設定のようなクラスを持っていなかったので、分かりませんでした。私は別のサービスとメインコンポーネントを持っていましたので、関数と変数は一緒にあなたのプランカのようなものではありません。しかし、私は今理解しています(:もう一度ありがとう! – mshantic

関連する問題