在Angular中使用reportProgress时，它不能立即返回进度而是要等到请求完成才一次性返回数据。为了实现实时返回进度和数据，可以使用RxJS中的Subject和异步数据流来解决。

例如，下面的代码示例展示了如何使用Subject来实现进度和数据的实时返回：

// service

import { Injectable } from '@angular/core'; import { HttpClient, HttpEvent, HttpEventType } from '@angular/common/http'; import { Observable, Subject } from 'rxjs';

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

getDataWithProgress(url: string): Observable { const progress = new Subject(); const data = new Subject(); let loaded = 0; this.http.get(url, { reportProgress: true, observe: 'events', responseType: 'text' }).subscribe((event: HttpEvent) => { switch (event.type) { case HttpEventType.Sent: break; case HttpEventType.ResponseHeader: break; case HttpEventType.DownloadProgress: loaded = event.loaded; const total = event.total || 1; progress.next(Math.round(loaded / total * 100)); break; case HttpEventType.Response: data.next(event.body); progress.complete(); data.complete(); break; } }); return { progress, data }; } }

// component

import { Component } from '@angular/core'; import { DataService } from './data.service';

@Component({ selector: 'app-root', template:

constructor(private dataService: DataService) { const result = this.dataService.getDataWithProgress(this.url); this.progress$ = result.progress; this.data$ = result.data; } }

上面的数据服务代码中使用了RxJS的Subject对象，在请求过程中将数据流和进度流分别绑定到两个Subject对象，并且针对HttpEventType.DownloadProgress和HttpEventType.Response事件分别把进度和数据的值发送到相应的Subject对象中。最后通过返回格式化后的结果将两个Subject对象都返回给组件。

组件代码中通过订阅服务返回的数据流和进度流分别接收进度和数据的实时变化并在模