Angular 如何在多个映射中使用相同的可观察对象？

我的代码有一个

主题

，当添加新值时，该主题会触发HTTP请求，该请求返回一个

可观察的

我想以两种不同的方式处理这些数据（使用相同的数据），并使用存储在

group

和

times

中的结果

可观测值作为值，使用
async
管道放入
ngFor

虽然这确实有效，但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;
  }
}

从“@angular/core”导入{Component，OnInit}；
从“rxjs/Observable”导入{Observable}；
从“rxjs/Subject”导入{Subject}；
从“./example.service”导入{ExampleService}；
导入“rxjs/add/operator/switchMap”；
@组成部分({
templateUrl:“./example.component.html”，
样式URL:[“/example.component.scss”]
})
导出类ExampleComponent实现OnInit{
建造师(
私有示例服务：示例服务
) { }
恩戈尼尼特（）{
变量选择=新主题（）；
var约会=选择
//exampleService.getData返回一个HTTP可观察值。
.switchMap（日期=>this.exampleService.getData（日期））；
var组=预约
.map（data=>this.process（data））；
var时间=预约
.map（data=>this.calculateTimes（data））；
//每次调用subscribe都会多次发送HTTP请求
//时代-我只想为他们两人发送一次：他们
//可以共享数据！！
group.subscribe（）；
订阅（；
//下一步（someData）是从一些
//省略代码。
}
processExample（数据：字符串[]）{
/*
*一些处理代码。
*/
返回数据；
}
计算时间（数据：字符串[]）{
/*
*一些处理代码。
*/
返回数据；
}
}

实现这一点的最佳方法是什么？
您可以使用
共享
操作员来归档您要查找的内容：

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.
}

导入'rxjs/add/operator/share'；
恩戈尼尼特（）{
变量选择=新主题（）；
var约会=选择
//exampleService.getData返回一个HTTP可观察值。
.switchMap（日期=>this.exampleService.getData（日期））
.share（）；
var组=预约
.map（data=>this.process（data））；
var时间=预约
.map（data=>this.calculateTimes（data））；
//每次调用subscribe都会多次发送HTTP请求
//时代-我只想为他们两人发送一次：他们
//可以共享数据！！
group.subscribe（）；
订阅（；
//下一步（someData）是从一些
//省略代码。
}

基本上，不同的
观察者之间共享相同的
源代码

有关操作员的更多信息