在Angular中，你可以使用HttpClient来发送网络请求，并通过HttpEvent和progress事件来监听请求的进度。下面是一个示例代码，展示了如何在下载文件时显示进度条或旋转器：

1. 首先，创建一个服务来处理网络请求：

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEventType, HttpResponse } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DownloadService {

  constructor(private http: HttpClient) { }

  downloadFile(url: string): any {
    const req = new HttpRequest('GET', url, {
      reportProgress: true,
      responseType: 'blob'
    });

    return this.http.request(req).pipe(
      map((event) => {
        if (event.type === HttpEventType.DownloadProgress) {
          const progress = Math.round(100 * event.loaded / event.total);
          return { type: 'progress', value: progress };
        } else if (event instanceof HttpResponse) {
          return { type: 'success', value: event.body };
        }
      })
    );
  }
}

2. 接下来，在组件中使用该服务，并监听请求的进度：

import { Component } from '@angular/core';
import { DownloadService } from './download.service';

@Component({
  selector: 'app-download',
  template: `
    

      下载文件
      

        
        
        
      
    
  `
})
export class DownloadComponent {
  showProgress = false;
  progress = 0;

  constructor(private downloadService: DownloadService) { }

  download() {
    this.showProgress = true;
    const url = 'https://example.com/file.pdf'; // 替换为你的文件下载链接
    this.downloadService.downloadFile(url).subscribe((event: any) => {
      if (event.type === 'progress') {
        this.progress = event.value;
      } else if (event.type === 'success') {
        this.showProgress = false;
        // 处理下载完成后的文件
        const fileBlob: Blob = event.value;
        const fileUrl = URL.createObjectURL(fileBlob);
        window.open(fileUrl); // 在新窗口中打开文件
      }
    });
  }
}

3. 最后，在进度条组件中显示进度：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'progress-bar',
  template: `
    

      
{{ progress }}%
    
  `
})
export class ProgressBarComponent {
  @Input() progress: number;
}

这样，当用户点击“下载文件”按钮时，进度条或旋转器将显示下载进度。完成后，文件将在新窗口中打开。你可以根据需要自定义进度条或旋转器的样式。