代码之家  ›  专栏  ›  技术社区  ›  ViqMontana

RxJS在Angular 5中的多个订阅

  •  1
  • ViqMontana  · 技术社区  · 6 年前

    <div>
        <h1>Parent Container</h1>
    
        <nest-one></nest-one>
        <nest-two></nest-two>
    </div>
    

    这些嵌套组件中的每一个都可以调用my service上的方法,该方法执行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 对于两个嵌套组件的订阅都要执行,而不管我从哪个组件调用它?

    这是我要做的一个简单的例子。另一个选择是使用一个基类,但是我想看看这是否可行。

    1 回复  |  直到 6 年前
        1
  •  1
  •   Bene    6 年前

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

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