角度2.1のHTTPクライアントはonProgressをサポートしています

Question

まず、Angular 2がリリースされる前の同様の質問がありました。奇妙な見た目の回避策が提案されましたが、試しても機能しませんでした。この機能がリリースに追加されたことを期待していました

私はTypeCriptでAngular 2のWebアプリケーションを作成していますが、進捗状況を示しながら1つ以上の画像をアップロードしたいと思います。これは、生のXmlHttpRequestで行うのは簡単ですが、Angular 2 HTTPラッパーを使用すると考えられます。 Angular2 HTTPのドキュメントでは、XmlHttpRequestをバックエンドとして使用しているため、生のリクエストにアクセスする方法があるとしていますか？イベント

を進めるためにリスニング

Answer 1

角度> = 4.3

https://angular.io/guide/http 

時々、アプリケーションは、大量のデータを転送する必要があり、それらの転送は時間がかかることがあります。このような転送の進捗状況に関するフィードバックを提供することは、ユーザーエクスペリエンスの習慣としては優れています。たとえば、ファイルをアップロードすると、@ angle/common/httpがこれをサポートします。

は最初の特別reportProgressオプションセットでのHttpRequestのインスタンスを作成し、有効にprogressイベントとリクエストを作成するには：

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

このオプションでは、progressイベントの追跡を可能にします。各イベントでUIを実際に更新する場合は、進捗イベントごとに変更検出がトリガーされることを覚えておいてください。

次に、HttpClientのrequest（）メソッドを使用して要求を行います。結果は、インターセプタの場合と同様に、Observableイベントになります。

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!'); 
    } 
});