2016-11-13 12 views
0

私にはたくさんのパターンがあり、私はそれを解決する最良の方法は何ではありません。スープの購読を避けるにはどうすればいいですか?

私に値を与える観測可能な(ここではルータへの)サブスクリプションがあります。別の観測可能性を得るために別のリクエストを作成するには、これらの値の1つが必要です。しかし、私はサブスクリプションで観察可能なものを持っています。

私はこれが良いパターンではないことを知っていますが、これを他にどのように行うべきかわかりません。

また、この2番目の観測値を使用して別の値を取得し、観測可能な観測可能な別の観測値を取得するとします。

これを解決してスープを避けるには?ここで

は私のコードです:

deal.component.ts

import {Component, OnInit, ChangeDetectionStrategy} from '@angular/core'; 
import {Observable} from "rxjs/Observable"; 
import {ActivatedRoute} from "@angular/router"; 
import {DealsService} from "../deals.service"; 

@Component({ 
    templateUrl: './+deal.component.html', 
    styleUrls: ['./+deal.component.scss'] 
}) 
export class DealRouterComponent implements OnInit { 

    deal$: Observable<any>; 
    public dealId:string; 
    private sub:any; 

    constructor(
    private route: ActivatedRoute, 
    private dealsService: DealsService) {} 

    ngOnInit() { 
    this.sub = this.route.params 
     .subscribe(params => { 
     this.dealId = params['id']; 
     this.deal$ = this.dealsService.getDeal(this.dealId); 
     }) 
    } 

    ngOnDestroy() { 
    this.sub.unsubscribe(); 
    } 

} 

deal.service.ts

import {Injectable, Inject} from "@angular/core"; 
import {Observable} from "rxjs/Observable"; 
import {AngularFireDatabase} from "angularfire2"; 

@Injectable() 
export class DealsService { 

    constructor(private db: AngularFireDatabase) {} 

    getDeal(id) { 
    return this.db.object('deals/' + id); 
    } 

} 

deal.component.html

{{deal | async | json}} 
+2

このパターンはネストされた「約束地獄」に似ています。解決策は、mergeMap(flatMap)演算子でオブザーバブルを連鎖させることです。 – estus

答えて

3

観察可能なものは、operatorsによって連鎖可能である。これは観測可能な強みの1つで、this tutorialがReactiveXの使い方を説明するのに最適であることがわかりました。

deal$のように観測値を変更しないでください。あなたのサービスはidから1つの取引だけを返していると仮定すると、あなたはあなたが望むものと仮定しながらObservableを構築していますが、Observableは時間の経過とともに取引を出すでしょう。また、新しいdeal$を定期的に再購読する必要があります。前のSubscriptionは、古いdeal$を引き続き聞き、新しい値を得ることはありません。

たびにルートのparamsを deal$はあなたのサービスから新たな契約を放出する更新されます方法
export class DealRouterComponent implements OnInit { 

    ngOnInit() { 
    this.deal$ = this.route.params.flatMap(params => 
     this.dealsService.getDeal(this.dealId = params['id']) 
    ); 
    } 
} 

+0

ありがとうございます。あなたの答えは、私がこれを理解するのを助けました。 – Tom

関連する問題