时间戳

首页 > 解决方案 > 嵌套服务中的 Angular 嵌套 observable - 如何

angular - 嵌套服务中的 Angular 嵌套 observable - 如何

问题描述

我知道如何在同一个组件/服务中做嵌套的 observable 。或者如何将一个可观察对象从服务返回到组件。但是我如何从一个服务 observable 获取数据到我的组件中，从另一个服务 observable 获取数据：

一个简化的场景：

我有一个 APIService 通过 observable 返回我的数据：

export class StockAPIService {
// ...
    getProducts(): Observable<any> {     
        return this.http.get<any>(this.productsUrl);
    }
}

我通常会在组件中像下面这样使用它：

export class ProductsComponent {
    products = {};
    ngOninit() {
        stockApiService.getProduct().subscribe(products => 
              this.products = doCalcWithProducts(products))
    }

    doCalcWithProducts() {
       // ALLOT of business logic comes here that I want to move to a service
    }
}

所以我想做一个看起来像这样的服务：

export class ProductService {
    doCalcWithProducts(): observable<any> {
        return stockApiService.getProduct().subscribe(products => 
              return doMoreCalcWithproducts(products))
    }
}

然后我的组件实际上只看起来像这样：

export class ProductsComponent {
    products = {};
    ngOninit() {
        this.ProductService.doCalcWithProducts().subscribe(products => 
              this.products = products)
    }
}

...删除了业务逻辑，但仍将我的 APIService 与我的 ProductService 分开

但我收到错误类型“订阅”不可分配给类型“可观察”。 在 ProductService 订阅

而且我尝试了从管道到地图的所有方法，而不是订阅...

标签： angularrxjsobservableangular-services

解决方案

ProductService必须返回Observable一个. 这意味着您不能在doCalcWithProducts()方法内订阅。

您应该stockApiService.getProduct()通过 map 函数传递结果。像这样：

export class ProductService {
  doCalcWithProducts(): Observable<any> {
    return stockApiService.getProduct().pipe(
      map(products => this.doMoreCalcWithproducts(products))
    );
  }
}

推荐阅读