在 Angular2 中显示进度条的最佳方式是什么?

执行 HTTP 请求时,在 Angular2 应用程序中显示进度条的最佳方式是什么?

我使用 AngularMaterial2 progress bar 尝试了以下操作:

<md-progress-bar mode="determinate" value="myValue"></md-progress-bar>

但是如何找到上述代码的“价值”呢?

(如果无法找出 HTTP 请求的实际进度,那么实现 Youtube 或 Github 样式进度条的最佳方法是什么?)

stack overflow What is the best way to display a progress bar in Angular2?
原文答案

答案:

作者头像

使用 Internet 上广泛可用的公共源代码中的库、模块或包

以下是一些 Angular 2 示例:

  1. https://embed.plnkr.co/rx4RJUFjHqGYMA3jRxDL/

  2. http://www.angulartypescript.com/angular-2-progress-bar/

作者头像

我们无法确定完成 HTTP 请求所需的时间,因此 indeterminate 模式更适合 HTTP 请求的进度。

Angular 的 Http 服务返回一个 Observable,我们可以订阅它并处理响应,目前还没有可用的机制从 Http 服务获取进度。

一种方法是使用 XmlHttpRequest 来监听 progress event ,如果使用它的 lengthComputable 属性,则可以相应地显示进度条。

所以实现 Youtube 或 Github 风格进度条的一种方法是 shown in this answer

如果您有多个请求,您可以使用已完成请求的百分比。