как подписать идентификатор созданного объекта после операции POST

Question

У меня есть компонент, в который я добавляю новый объект с именем customer, вызывая api следующим образом:

  public onAdd(): void {
    this.myCustomer = this.customerForm.value; 
    this.myService.addCustomer(this.myCustome).subscribe(
      () => {  // If POST is success
        this.callSuccessMethod(); 
      },
      (error) => { // If POST is failed
       this.callFailureMethod();
      },
    );

 }

Сервисный файл:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import {ICustomer } from 'src/app/models/app.models';

@Injectable({
  providedIn: 'root',
})

export class MyService {
 private  baseUrl : string = '....URL....';
 constructor(private http: HttpClient) {}


public addCustomer(customer: ICustomer): Observable<object> {
  const apiUrl: string = `${this.baseUrl}/customers`;

  return this.http.post(apiUrl, customer);
}

}

Как показано в коде компонента, я уже подписался на вызов api следующим образом:

this.myService.addCustomer(this.myCustome).subscribe(
          () => {  // If POST is success
            .....
          },
          (error) => { // If POST is failed
           ...
          },
        );

Но я хочу подписать результаты в другом компоненте, я пробовал так:

public  getAddedCustomer() { 
    this.myService.addCustomer().subscribe(
      (data:ICustomer) => { 
        this.addedCustomer.id = data.id; <======
      }
    );
  }

Я получаю эту ошибку: Expected 1 arguments, but got 0, поскольку я не передаю parameter.

Каков правильный подход для подписки вызова API в других компонентах? после POST операции.

Потому что я хочу получить идентификатор объекта для других функций.

Answer 1

Ну, это полностью зависит от дизайна вашего приложения и отношения между компонентами.Вы можете использовать темы для многоадресной передачи данных нескольким подписчикам.

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { ICustomer } from 'src/app/models/app.models';

@Injectable({
  providedIn: 'root',
})

export class MyService {
 private  baseUrl : string = '....URL....';
 private latestAddedCustomer = new Subject();
 public latestAddedCustomer$ = this.latestAddedCustomer.asObservable()
 constructor(private http: HttpClient) {}


public addCustomer(customer: ICustomer): Observable<object> {
  const apiUrl: string = `${this.baseUrl}/customers`;

  return this.http.post(apiUrl, customer).pipe(map((data) => this.latestAddedCustomer.next(data)));
}

}

и подписки на эту тему следующим образом

this.latestAddedCustomer$.subscribe()

должны получить последние добавленные данные клиента.Даже если бы я не сделал это так, как написано.Я бы в основном написал отдельную службу для совместного использования данных между компонентами или написал бы службу кеша, если бы она использовалась в приложении.Но идея здесь состоит в том, чтобы использовать концепцию предметов.Вы можете прочитать больше об этом Здесь