如何在angular 2服务调用中跟踪进度

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/finally';

private progressSubject: Subject<number> = new Subject<number>();
public progress$: Observable<number> = this.progressSubject.asObservable();

import { HttpClient, HttpRequest, HttpEventType } from '@angular/common/http';

@Injectable()
export class YourService {
  constructor(private http: HttpClient) {}

  public makeRequest(): Observable<any> {
    const request = new HttpRequest('GET', 'your-api-url', {
      reportProgress: true, // 开启进度报告
    });

    return this.http.request(request)
      .map(event => {
        if (event.type === HttpEventType.DownloadProgress) {
          const progress = Math.round(100 * event.loaded / event.total);
          this.progressSubject.next(progress); // 发布进度更新
        } else if (event.type === HttpEventType.Response) {
          // 请求完成，处理响应
        }
        return event;
      })
      .finally(() => {
        this.progressSubject.complete(); // 完成进度跟踪
      });
  }
}

import { Component, OnInit } from '@angular/core';
import { YourService } from './your-service';

@Component({
  selector: 'app-your-component',
  template: `
    <div>{{ progress$ | async }}%</div>
  `,
})
export class YourComponent implements OnInit {
  public progress$: Observable<number>;

  constructor(private yourService: YourService) {}

  ngOnInit() {
    this.progress$ = this.yourService.progress$;
    this.yourService.makeRequest().subscribe(response => {
      // 处理响应
    });
  }
}