Angular HttpClient - 在等待服务响应时显示微调器/进度指示器 - 进度事件

Question

我正在切换我的服务调用以使用新的HttpClient。我有三件事情挣扎

1. 图如何显示微调/进度条/等，同时等待 从一个帖子，GET，PUT的响应。
2. 假响应缓慢
3. 是否可以使用新的进度事件来触发此类功能？

application.component.ts

this.applicationFormService.putForm(formModel)  
    .subscribe(
    // Successful responses call the first callback. 
    (res) => this.goToRoute(res), 
    // Errors will call this callback instead: 
    (err: HttpErrorResponse) => { 
     if (err.error instanceof Error) { 
     console.log("Client-side error occured."); 
     } else { 
     console.log("Server-side error occured."); 
     } 
    }, 
    //Tried adding progress event logic here but I get error Argument of type '(event: any) => void' is not assignable to parameter of type '() => void'. Is this totally the wrong implementation and can it even be used for showing progress? 
    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. 
     } else if (event instanceof HttpResponse) { 

     } 
    } 
) 

application.service.ts

constructor (private httpNew: HttpClient){} 
putForm(applicationForm:any){ 
this.applicationId = this.id.id 
const req = new HttpRequest('PUT', this.applicationSubmitUrl+this.applicationId, applicationForm, { 
    reportProgress: true, 
}); 
return this.httpNew.request(req) 
} 

Answer 1

我的例子的OnInit微调已经结合@aravind的答案和这篇文章（https://alligator.io/angular/httpclient-intro/）拼凑解决方案。这利用了Angular的Http客户端进度事件来打开/关闭微调器，并处理错误。

组件：

showSpinner = false; 
this.shortFormService.postShortForm(formModel) 
    .subscribe(  

    (event: HttpEvent<any>) => { 
     console.log(event) 
     switch (event.type) { 
     case HttpEventType.Sent: 
      this.showSpinner = true; 
      console.log('Request sent!'); 
      break; 
     case HttpEventType.ResponseHeader: 
      console.log('Response header received!'); 
      break; 
     case HttpEventType.UploadProgress: 
      const percentDone = Math.round(100 * event.loaded/event.total); 
      console.log(`File is ${percentDone}% uploaded.`); 
     case HttpEventType.DownloadProgress: 
      const kbLoaded = Math.round(event.loaded/1024); 
      console.log(`Download in progress! ${ kbLoaded }Kb loaded`); 
      break; 
     case HttpEventType.Response: 
      console.log(' Done!', event.body); 
      this.showSpinner = false;    

     } 
    }, 
    (err: HttpErrorResponse) => { 
     if (err.error instanceof Error) { 
     console.log("Client-side error occured."); 
     } else { 
     this.router.navigate(['/error', err.error.error]); 
     console.log("Server-side error occured."); 
     } 
    } 
) 

} 

服务：

postShortForm(shortForm: any) { 
const req = new HttpRequest('POST', this.preCheckUrl, shortForm, { 
    reportProgress: true, 
}); 
return this.httpNew.request(req) 
    .retry(3) 
} 

Answer 2

使用下面的代码

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'spinner', 
    template: 
    ` <div *ngIf="show"> 
      <span><i class="fa fa-spinner fa-spin" [ngStyle]="{'font-size': size+'px'}" aria-hidden="true"></i></span> 
     </div> 
    ` 
}) 
export class SpinnerComponent { 
    @Input() size: number = 25; 
    @Input() show: boolean; 


} 

在你的主要组件创建一个微调组件，添加组件标记如下

<spinner [show]="showSpinner" [size]="150"> </spinner> 

在您的打字稿代码

this.applicationFormService.putForm(formModel)  
    .subscribe(data=>{ 
     .... 
     // hide the spinner 
     this.showSpinner = false; 

    }(err: HttpErrorResponse) => { 
     this.showSpinner = false;   
    }) 

表明，你正在服务呼叫，该组件

ngOnInit(){ 
    this.showSpinner = true; 
    ...service call logics... 
} 

LIVE DEMO