如何使用参数订阅可观察函数

Question

我有具有任意可观察参数的函数，它正在做一些工作。 我想订阅一个有其他订阅的主题（为了让所有被调用的函数触发）。

我找不到正确的方法。

我的服务：

//The method of the observable 
addProduct2(product: Product) {     
  delete product.id;
  const url = 'http://localhost:8080/createProduct';
  return this.http.post<Product>(url, product);
}

我希望这会起作用：

getProductsEvent:Subject<Product> = new Subject();

constructor(private http: HttpClient, private currentRoute: ActivatedRoute) {
  //....
  this.addProduct2.subscribe(this.getProductsEvent);
}

我得到这个编译错误：

错误 src/app/components/products-feature/data-service.service.ts(42,22)： 错误 TS2339：类型“（产品： 产品）=> 可观察的'。

在日志中：

AppComponent.html:3 ERROR TypeError: this.addProduct2.subscribe 不是 一个函数 在新的 DataServiceService (data-service.service.ts:42)...

我怎样才能正确地实现它？我缺少什么？

记住我不能调用

this.addProduct2().subscribe...; 

因为它有一个参数，我不知道它会得到什么参数。

Answer 1

如果您想在每次创建新产品时发出一个事件，您必须在您的 productsEvent 上调用 next Subject。

private productEvent: Subject<Product> = new Subject(); 

public getProductsEvent(); Subject<Product> {
  return this.productEvent;
}

public addProduct(product: Product): Observable<Product> {
  delete product.id;
  const url = 'http://localhost:8080/createProduct';
  return this.http.post<Product>(url, product).pipe(
    tap((product: Product) => this.productEvent.next(product)),
  );
}

在您的 http post 请求返回新产品后，我使用管道和 pipable tap 运算符调用 next 。 addProduct 方法返回一个 observable，这意味着在您订阅它之前什么都不会发生。

• 阅读更多the rxjs pipe and pipable operators here in the documentation
• 阅读更多关于水龙头操作员here in the documentation

通过这样的所有设置，您可以按如下方式使用它：

您可以通过调用方法和订阅来添加产品。

addProduct(data).subscribe();

在您订阅活动的任何地方都会收到通知：

getProductsEvent().subscribe((addedProduct: Product) => {
  // Do something with the added product
  console.log(addedProduct)
});

---

注意 我保留了你问题中的类型，但我想知道你发布的数据类型 Product 是否与响应的类型相同，也是 @987654329 @ 但我猜你最了解你的对象类型，所以我保持原样。