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

Question

我有可以做一些工作的带有任意参数的 observable 函数。 我想订阅一个主题，它有其他一些订阅（对于调用的函数触发所有）。

我找不到正确的方法。

我的服务：

//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：属性 'subscribe' 不存在于类型 '(product: Product) => Observable'。

并在日志中：

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

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

记住我不能调用

this.addProduct2().subscribe...; 

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

Answer 1

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

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 请求返回新产品后，我使用了管道和可管道的 tap 运算符来调用 next 。 addProduct方法返回一个 observable，这意味着在您订阅它之前什么都不会发生。

• 在文档中阅读有关rxjs 管道和可管道操作符的更多信息
• 在文档中阅读更多关于水龙头操作员的详细信息

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

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

addProduct(data).subscribe();

在您订阅事件的任何地方，您都会收到通知：

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

---

注意我保留了您问题中的类型，但我想知道您发布Product的数据类型是否与响应类型相同，还有Product但我想您最了解您的对象类型，所以我保持原样.