複数のマッピングで同じオブザーバブルを使用するにはどうすればよいですか？

Question

私のコードはSubjectです。新しい値が追加されると、Observableを返すHTTPリクエストがトリガーされます。

Iは、（同じデータを使用して）2つの異なる方法で、このデータを処理し、値がasyncパイプを使用してngForに配置するように、得られたObservablesがgroupとtimesに格納されている使用します。

これは動作しますが、HTTPリクエストは複数回送信されます。サブスクリプションごとに1回のみ送信することを望みます。

以下のサンプルコードは実際のシナリオからは省略されているため、実用的な文脈では意味をなさないかもしれませんが、HTTPリクエストを複数回送信する際の問題点を示しています。

import { Component, OnInit } from "@angular/core"; 
import { Observable } from "rxjs/Observable"; 
import { Subject } from "rxjs/Subject"; 

import { ExampleService } from "../example.service"; 

import "rxjs/add/operator/switchMap"; 

@Component({ 
    templateUrl: "./example.component.html", 
    styleUrls: ["./example.component.scss"] 
}) 
export class ExampleComponent implements OnInit { 

    constructor(
    private exampleService: ExampleService 
) { } 

    ngOnInit() { 

    var selections = new Subject<string>(); 

    var appointments = selections 
     // exampleService.getData returns an HTTP observable. 
     .switchMap(date => this.exampleService.getData(date)); 

    var group = appointments 
     .map(data => this.process(data)); 

    var times = appointments 
     .map(data => this.calculateTimes(data)); 

    // Calling subscribe each time sends the HTTP request multiple 
    // times - I only want it to be send once for both of them: they 
    // can share the data!! 
    group.subscribe(); 
    times.subscribe(); 

    // selections.next(someData) is called periodically from some 
    // omitted code. 
    } 

    processExample(data: string[]) { 
    /* 
    * Some processing code. 
    */ 

    return data; 
    } 

    calculateTimes(data: string[]) { 
    /* 
    * Some processing code. 
    */ 

    return data; 
    } 
} 

Answer 1

あなたが探しているものをアーカイブするshare演算子を使用することができます。基本的には

import 'rxjs/add/operator/share'; 

ngOnInit() { 

    var selections = new Subject<string>(); 

    var appointments = selections 
    // exampleService.getData returns an HTTP observable. 
    .switchMap(date => this.exampleService.getData(date)) 
    .share(); 

    var group = appointments 
    .map(data => this.process(data)); 

    var times = appointments 
    .map(data => this.calculateTimes(data)); 

    // Calling subscribe each time sends the HTTP request multiple 
    // times - I only want it to be send once for both of them: they 
    // can share the data!! 
    group.subscribe(); 
    times.subscribe(); 

    // selections.next(someData) is called periodically from some 
    // omitted code. 
} 

、異なるobserversは、それらの間で同じsourceを共有しています。

オペレーターhereに関するさらに詳しい情報