我切换了我的服务调用以使用新的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)
}
答案 0 :(得分:5)
使用以下代码
创建一个微调器组件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 强>
答案 1 :(得分:4)
我将@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)
}