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

【问题标题】：What is the best way to display a progress bar in Angular2?在 Angular2 中显示进度条的最佳方式是什么？
【发布时间】：2016-08-17 06:12:48
【问题描述】：

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

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

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

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

（如果无法找出HTTP请求的实际进度，那么实现Youtube或Github风格进度条的最佳方法是什么？）

【问题讨论】：

【解决方案1】：

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

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

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

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

如果您有多个请求，您可以使用已完成请求的数量作为百分比。

【讨论】：

【解决方案2】：

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

以下是一些 Angular 2 示例：

【讨论】：