Угловой 2.1 HTTP-клиент поддерживает onProgress

Question

Прежде всего - аналогичный вопрос был задан до того, как был выпущен Angular 2, и ответ был в основном нет. Были предложены некоторые необычные обходные пути, но они не работали, когда я их пробовал. Я надеялся, что эта функция была добавлена ​​в релиз

Я пишу веб-приложение с угловым 2 в машинописном тексте, и я хочу загрузить одно или несколько изображений, показывая прогресс. Это достаточно просто, чтобы сделать с необработанным XmlHttpRequest, но я бы подумал, что это возможно, используя обертку Angular 2 HTTP. Документация для Angular2 HTTP говорит, что он использует XmlHttpRequest в качестве задней части, поэтому, возможно, есть способ получить доступ к необработанному запросу?

Answer 1

Угловое> = 4,3

https://angular.io/guide/http 

Прослушивание прогресс события

Иногда приложения должны передавать большие объемы данных, и эти переводы могут занять некоторое время. Хорошая практика использования пользователями для предоставления отзывов о ходе таких передач; например, загрузка файлов, а @ angle/common/http поддерживает это.

Чтобы сделать запрос с ходом событий, включенных сначала создать экземпляр HttpRequest со специальным набором опций reportProgress:

const req = new HttpRequest('POST', '/upload/file', file, { 
    reportProgress: true, 
}); 

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

Затем выполните запрос с помощью метода request() HttpClient. Результатом будет Наблюдение за событиями, как и с перехватчиками:

http.request(req).subscribe(event => { 
    // Via this API, you get access to the raw event stream. 
    // Look for upload progress events. 
    if (event.type === HttpEventType.UploadProgress) { 
    // This is an upload progress event. Compute and show the % done: 
    const percentDone = Math.round(100 * event.loaded/event.total); 
    console.log(`File is ${percentDone}% uploaded.`); 
    } else if (event instanceof HttpResponse) { 
    console.log('File is completely uploaded!'); 
    } 
});