Question

很抱歉，如果这是一个重复的问题，但是我是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;
    }
  );

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

这是我要执行的操作的简化示例。另一个选择可能是拥有一个基类并改为使用它，但是我想看看这是否可行。

Answer 1

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

parent.ts

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

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

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

Angular 5中的RxJS多个订阅

1 个答案: