2017-01-25 14 views
2

ObservablesとAngular 2サービスの変数の使用に関する質問があります。前者が好ましい方法だと思われますが、私はなぜそれが正確かはわかりません。私は、コンポーネント内のデータを消費するのは基本的2つの方法を見てきましたObservablesとAngular 2サービスの変数

@Injectable() 
export class TestService { 
    // Method 1 
    public data = {x: Math.random(), y: Math.random()}; 

    // Method 2 
    private _data$:BehaviorSubject<any> = new BehaviorSubject({x: Math.random(), y: Math.random()}); 
    public data$:Observable<any> = this._data$.asObservable(); 

    constructor() { 
     setInterval(() => { 
      this.data = {x: Math.random(), y: Math.random()}; 
      this._data$.next({x: Math.random(), y: Math.random()}); 
     }, 500); 
    } 
} 

は、このようなサンプルサービスを考えます。ただ、直接変数を使用して:

<pre>{{testService.data | json}}</pre> 

観察可能を使用して:

<pre>{{(testService.data | async) | json}}</pre> 

はどちらも動作するようには思えので、より精巧な観察可能なベースのアプローチを使用する利点は何ですか?

Plunker:https://plnkr.co/edit/1qVDSZwq2NVgZsWFPnii?p=preview

答えて

6

観測は変更にサブスクライブのコンポーネントとサービスに値の変更をプッシュします。

変数にはポーリングが必要なため、パフォーマンスが大幅に向上します。

特にタイミングの問題がある場合、コンポーネントはサービスがサーバーから取得した値を要求します。 コンポーネントは、利用可能になる値についてどのように知っていますか。

観測可能なコンポーネントは、値が到着したときにただサブスクライブして呼び出されます。

角度変化検出は、観測値を直接サポートします。 ChangeDetectionStrategy.OnPushが使用され、ビューが非同期パイプ(<div>{{myObservable | async}}</div>)を使用してオブザーバブルにバインドされると、新しい値がオブザーバブルによってプッシュされた場合を除き、変更検出はまったく実行されません。

オブザーバブルには他の利点があります。 例を参照してくださいhttps://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

0

違いは、観測値はストリームであり、ストリームに複数のサブスクライバを含めることができます。そして、あなたはまた、ストリームのすべての利点を得る - 暑い、冷たいobervables、返信、フィルタなど

関連する問題