Каков наилучший способ отображения индикатора выполнения в Angular2?

Question

Каков наилучший способ отображения индикатора выполнения в приложении Angular2 при выполнении HTTP-запроса?

Я попытался следующие с помощью AngularMaterial2 progress bar:

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

Но как найти «значение» для приведенного выше кода?

(Если это не представляется возможным выяснить фактический ход запроса HTTP, что является лучшим способом для достижения прогресса в стиле бар Youtube или GitHub?)

Answer 1

Использование библиотеки, модуля или пакеты из общественного исходный код широко доступен в интернете

Вот некоторые угловые 2 примера:

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

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

Answer 2

Мы не можем определить время, необходимое для выполнения запроса HTTP, поэтому режим indeterminate больше подходит для продвижения HTTP запросов.

Угловая функция Http возвращает наблюдаемое, на которое мы можем подписаться и обрабатывать ответ, прямо сейчас нет механизма для получения прогресса от службы Http.

Один из способов - использовать XmlHttpRequest для прослушивания progress event и, если использовать его свойство lengthComputable, и может отображать индикатор выполнения соответственно.

Таким образом, одним из способов достижения индикатора хода работы Youtube или Github был shown in this answer.

Если у вас есть несколько запросов, вы можете использовать количество заполненных запросов в процентах.