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

Question

I have function with arbitrary params of observable that is doing some job. I want to subscribe to it a subject that have other some subscription (for make all triggered for the functions called).

I can't find the way to do it right.

My service :

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

I want that this will work :

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

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

I am getting this compiling error :

ERROR in src/app/components/products-feature/data-service.service.ts(42,22): error TS2339: Property 'subscribe' does not exist on type '(product: Product) => Observable'.

and in the logs :

AppComponent.html:3 ERROR TypeError: this.addProduct2.subscribe is not a function at new DataServiceService (data-service.service.ts:42)...

How can I achieve it right? What's I'm missing?

remember that I can't invoke

this.addProduct2().subscribe...; 

because it's have a params, and I don't know what params it will get.

Answer 1

If you want to emit an event every time a new product is created you have to call next on your productsEvent 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)),
  );
}

I used a pipe and the pipable tap operator to call next after the new product is returned from your http post request. The addProduct method returns an observable that means nothing will happen until you subscribe to it.

• Read more on the rxjs pipe and pipable operators here in the documentation
• Read more specifically on the tap operator here in the documentation

With everything setup like this you can use it as follows:

Somewhere you can add a product by calling the method and subscribing.

addProduct(data).subscribe();

And anywhere where you subscribed to the event you will be notified:

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

---

Note I kept the types like in your question, but I wonder if the type of the data you post Product is the same as the type of the response, also Product but I guess you know your object types best, so I left it as is.