Angular Typescript 调用 Observable 函数一次答案

【问题标题】：Angular Typescript call Observable function onceAngular Typescript 调用 Observable 函数一次
【发布时间】：2017-07-13 20:04:56
【问题描述】：

在我的 Angular 应用程序中，我有一个从服务器加载数据的服务。

load.service.ts：

load = new Observable(observer => {
  console.log('load function called');
  // async stuff that takes time

  observer.complete();
});

我还有一堆组件都需要等到load observable 完成。我这样做：

this.loadService.load.subscribe(
  change => {},
  error => {},
  () => {
    // do stuff with data
  }
);

但是，如果我有多个组件都订阅，load 函数会被多次调用，向服务器发送大量请求（如 console.log('load function called'); 所见。

我的问题

我知道使用 Angular 可以解决这个问题，但我的问题是：

如何对一个 observable 进行多次订阅但只调用一次函数？

我的问题不是关于缓存数据。 这是关于可观察的。

【问题讨论】：

Angular 2 cache observable http result data的可能重复
@jonrsharpe 我的问题不是关于缓存数据。这是关于可观察的
请阅读我的回答，我想您会发现它也适用于您的情况。您希望一个数据源有多个订阅者，这与缓存没有什么不同。
我确实阅读了您的答案，但不适用于我的问题。我以load 函数为例说明我的问题是如何应用的。我只想知道是否可以在不多次调用的情况下订阅一个函数
好吧，那么：不，当然不是。您不能“订阅函数”。您可以调用一个函数，并订阅它返回的内容。使用 observables，您可以将它返回的内容传递给其他事物，并且它们也可以订阅。但是我展示的模式的重点是您将触发器和订阅分开，因此您可以一次获取数据并轻松地从多个位置订阅。您也可以从某个地方重新获取，所有订阅者都会在新数据到达时获得。

标签： angular typescript observable

【解决方案1】：

为什么不使用BehaviourSubject 来存储从loadService load 方法返回的内容并订阅BehaviourSubject。它应该可以解决您的问题。 Angular 2 Brhaviour Subject vs Observable

【讨论】：

【解决方案2】：

您必须了解可观察对象的工作原理。 load 是“冷”，这意味着将为每个subscribe 启动新序列。您需要使用 share 运算符使其“热”并在某处存储对结果 observable 的引用：

 public load(){
      if(this.completed){
         this.shared = new Observable(...).share();
         this.shared.subscribe(()=> this.completed = true);
         this.completed = false;
      }
      return this.shared;
 }

【讨论】：

【解决方案3】：

RxJs 有 share() 方法。请参阅 RxJs 文档：https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/share.md

这是另一个与此相关的 SO 帖子：How to call single ajax request by multiple components parallely in angular2 cli project

希望有帮助

【讨论】：