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

时间:2016-08-17 06:12:48

标签: angular angular-material2

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

我使用AngularMaterial2 progress bar尝试了以下内容:

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

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

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

2 个答案:

答案 0 :(得分:0)

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

Angular的Http服务返回一个我们可以订阅并处理响应的Observable,现在没有可用于从Http服务获得进展的机制。

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

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

  

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

答案 1 :(得分:-3)

使用互联网上广泛提供的公共源代码中的库,模块或包

以下是一些Angular 2示例:

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

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