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

Question

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

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

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

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

(如果无法查到HTTP请求的实际进度，实现Youtube或Github风格的进度条最好的方法是什么？)

Answer 1

我们无法确定完成 HTTP 请求所需的时间，这就是为什么 indeterminate 模式更适合 HTTP 请求的进度。

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

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

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

If you have more than one request, you could use the number of completed requests as a percentage.