订阅来自不同组件的服务响应

Question

I have a upload component that uploads file(s) to a server using upload.service.ts's upload method in angular. The server returns a JSON response in that method. I also have another component which is interested in the JSON response. But how can the another component subscribe to the JSON response.

Answer 1

If this service is a singleton, then you could set up an observable that holds the reponse objects.

upload.service.ts

@Injectable({ providedIn: 'root' })
export class UploadService {
  private uploadResponseSource = new Subject<any>();
  public uploadResponse$ = this.uploadResponseSource.asObservable();

  upload() {
    return this.http.post(...).pipe(
      tap(response => this.uploadResponseSource.next(response))
    );
  }
}

You could then subscribe to this observable from a component to receive the object response.

Some component

export class SomeComponent implements OnInit {
  uploadResponse: any;

  ngOnInit() {
    this.uploadService.uploadResponse$.subscribe(
      response => { this.uploadResponse = response }
    );
  }
}