时间戳

首页 > 解决方案 > 如何在 Angular 2 和 .net 核心中制作进度条

c# - 如何在 Angular 2 和 .net 核心中制作进度条

问题描述

我正在尝试在 .netCore 和 Angular 8 中创建一个进度条。服务器 .net core 有一个循环来让所有人都记录下来，我想展示在 Angular 方面取得的进展。例如循环 65/100 => 65%

在角度方面，我制作了这样的服务器：

public download(fileName: string): Observable<DownloadResponse> {
 let downloadURL = `urlToDownloadDocument`;

return this.httpClient.get(downloadURL, {
  reportProgress: true,
  observe: 'events'
  , responseType: 'blob'
}).pipe(map((event) => {
  this.downloadResponse.status = event.type;

  switch (event.type) {

    case HttpEventType.Sent:
      this.downloadResponse.filePath = null;
      return this.downloadResponse;

    case HttpEventType.DownloadProgress:
      this.downloadResponse.message = Math.round(100 * event.loaded / event.total).toString() + '%';
      this.downloadResponse.filePath = null;
      return this.downloadResponse;

    case HttpEventType.ResponseHeader:
        this.downloadResponse.message = 'Finished';
        this.downloadResponse.filePath = event.url;
        return this.downloadResponse;

    case HttpEventType.Response:
        this.downloadResponse.message = 'Transfering';
        this.downloadResponse.filePath = event.url;
        this.downloadResponse.body = event.body;
        this.Transfer(event.body, fileName);

      return this.downloadResponse;
    default:
      this.downloadResponse.message = `Unhandled Case ${event.type}`;
      this.downloadResponse.filePath = null;
      return this.downloadResponse;
  }
})
);
}

private Transfer(blob: Blob, fileName){
  let link = document.createElement('a');
  link.target = '_blank';
  link.href = window.URL.createObjectURL(blob);
  link.setAttribute("download", fileName);
  link.click();
}

在.net 中有一个控制器，它返回一个 FileSramResult

public IActionResult getAllDocument(...){
    ...
    return File(stream, "application/zip", "Documents.zip");
}

我认为角度中的“观察：'事件'”只是在浏览器中获取操作，而无法观察.net服务器中的操作。我搜索了有关 signarlR 以获取双方之间的通信，但我找不到任何文章说在 Angular 2 和 .netCore 中的下载进度条在此链接旁边Angular 2 / .NET Core 进度条 寻求找到一种方法来计算查询中的进度，不要说如何在视图中显示进度。

标签： c#angularsignalrprogress-bar

解决方案

我找到了我的解决方案。在阅读了关于 signalR 和 Angular 2 的本教程 https://rukshan.dev/2019/05/how-to-notify-your-angular-7-app-using-signalr 我改变了一点

集线器：

Task DownloadResponseMessage(string message, int percentage);

Task GetConnectionId();

(someClass : Hub<...>):

public string GetConnectionId()
{
    var result = Context.ConnectionId;
    return result;
}

发送进度：

_hubContext.Clients.Client(connectionId).DownloadResponseMessage(message, percentage);

在 Angular 中：

  ngOnInit() {
    this.connection = new signalR.HubConnectionBuilder()
      .configureLogging(signalR.LogLevel.Information)
      .withUrl("http://localhost:5627/download")
      .build();

    this.connection.start().then(function () {
      console.log('Connected!');
    }).catch(function (err) {
      console.error(err);
    });

    console.log(this.connection);

    this.connection.on("DownloadResponseMessage", (message: string, percentage: number) => {
      this.message = message;
      this.percentage = percentage;
    });

  }

  getConnectionId(){

    return this.connection.invoke("GetConnectionId")
      .then((connectionId:any) => {
        console.log(connectionId);
        this.connectionId = connectionId;
      },
      e => {
        console.log(e);
      });
  }

  click(){
    this.getConnectionId().then(() => {
      this.httpClient.get("http://localhost:5627/api/message?connectionId="+this.connectionId).subscribe();
    })

  }

推荐阅读