执行 HTTP 请求时,在 Angular2 应用程序中显示进度条的最佳方式是什么?
我使用AngularMaterial2 进度条尝试了以下操作:
<md-progress-bar mode="determinate" value="myValue"></md-progress-bar>
但是如何找到上述代码的“价值”呢?
(如果无法查到一个 HTTP 请求的实际进度,那么实现 Youtube 或 Github 风格的进度条的最佳方法是什么?)
执行 HTTP 请求时,在 Angular2 应用程序中显示进度条的最佳方式是什么?
我使用AngularMaterial2 进度条尝试了以下操作:
<md-progress-bar mode="determinate" value="myValue"></md-progress-bar>
但是如何找到上述代码的“价值”呢?
(如果无法查到一个 HTTP 请求的实际进度,那么实现 Youtube 或 Github 风格的进度条的最佳方法是什么?)
我们无法确定完成 HTTP 请求所需的时间,因此indeterminate
mode 更适合 HTTP 请求的进度。
Angular 的 Http 服务返回一个 Observable,我们可以订阅它并处理响应,目前没有可用的机制来从 Http 服务获取进度。
一种方法是使用 XmlHttpRequest 来监听进度事件,如果使用它的lengthComputable
属性并可以相应地显示进度条。
因此,此答案中显示了实现 Youtube 或 Github 样式进度条的一种方法 。
如果您有多个请求,则可以使用已完成请求的数量作为百分比。
使用来自 Internet 上广泛可用的公共源代码的库、模块或包
以下是一些 Angular 2 示例: