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

发布时间：2020-12-17 17:51:57 所属栏目：安全来源：网络整理

导读：我正在切换我的服务调用以使用新的HttpClient.我正在努力做三件事弄清楚如何在等待时显示微调器/进度条/等对于来自帖子的回复,获取,放置. 假反应迟钝是否可以使用新的进度事件来触发此类功能？ application.component.ts this.applicationFormService.put

我正在切换我的服务调用以使用新的HttpClient.我正在努力做三件事

>弄清楚如何在等待时显示微调器/进度条/等
对于来自帖子的回复,获取,放置.
>假反应迟钝
>是否可以使用新的进度事件来触发此类功能？

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)
}

解决方法

使用以下代码创建一个微调器组件

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

显示您正在进行服务调用的微调器,例如组件的onInit

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

LIVE DEMO

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!