Angular 5 中的 RxJS 多个订阅答案

【问题标题】：RxJS multiple subscriptions in Angular 5Angular 5 中的 RxJS 多个订阅
【发布时间】：2019-04-02 13:05:30
【问题描述】：

抱歉，如果这是一个重复的问题，但我是 RxJS 和 Angular 的新手，我不太确定要搜索什么。

我有以下具有 2 个嵌套组件的 Angular 组件：

<div>
    <h1>Parent Container</h1>

    <nest-one></nest-one>
    <nest-two></nest-two>
</div>

这些嵌套组件中的每一个都可以调用我的服务上的方法，该方法执行一个 http 调用：

getProduct(id: number): Observable<Product[]>  {
    return this.http.get('product/' + id)
    .map((response: Response) => {
      return response;
    })
    .catch(this.handleError);
  }

两个嵌套组件都像这样订阅这个方法调用：

this.productService.getProduct(id)
  .subscribe(
    data => {
      this.product = data;
    }
  );

我的问题是，无论我从哪个组件调用它，我怎样才能或者是否可以在我的 productService 中调用方法 getProduct 并执行两个嵌套组件的订阅？

这是我正在尝试做的一个简化示例。另一种选择可能是拥有一个基类并使用它，但我想看看这是否可能。

【问题讨论】：

如果你订阅了两个组件，它会执行两次，那么问题出在哪里？你想只调用一次吗？
@martin 是的，我希望每次调用该方法时都执行两个订阅（从任何地方）......这对我来说目前没有发生，但你是说应该这样吗？
是的，如果您对getProduct 进行两次订阅，您将发出两次请求
@martin 如果我只是单独调用this.productService.getProduct(id)，我的订阅将永远不会被执行。
你必须在链的末尾订阅。 this.productService.getProduct(id).subscribe(...)

标签： angular rxjs

【解决方案1】：

您应该使用您的父容器来处理这个问题。当您想要加载新产品时，向两个组件添加一个输出，一个输入以将检索到的产品传递给它们。

父.ts

loadProduct$ = new Subject<string>();
product$ = this.loadProduct$.switchMap(id => this.productService.getProduct(id)).share();

父.html

<div>
      <h1>Parent Container</h1>

      <nest-one [product]="product$ | async"  (loadProduct)="loadProduct$.next($event)></nest-one>
      <nest-two [product]="product$ | async"  (loadProduct)="loadProduct$.next($event) ></nest-two>

  </div>

现在两个孩子都在获得新产品，无论是哪个发起呼叫的。共享运算符确保没有多个流并且后端只被调用一次。这是一种方法 - 如果您更详细地描述您的用例，我们可能会给您更好的答案。

【讨论】：

这是我最后走的路线。我只是不确定是否有更简单的方法来做到这一点，比如 Redux 之类的某种状态管理。无论如何，为什么你有loadProduct$.next($event) 而不是仅仅调用loadProduct$ 方法并设置product$ 变量？
如果我要重置（=更改引用）product-observable，异步管道将不得不重新订阅源，因为它已经更改了它。如果我像上面那样做，则不会更改任何引用，并且只会有一个流