En mi aplicación angular 2, hago una llamada del componente al servicio y del servicio a la API web de back-end. La respuesta obtenida de la API web se devuelve desde el servicio al componente y me suscribo a la respuesta dentro del componente. Para el manejo de errores, estoy usando un componente de error común que se usa en toda la aplicación. Este componente de error se usa como una ventana emergente modal dentro de otros componentes. Si ocurre un error, este modal aparece con un botón 'Reintentar'. Actualmente, al hacer clic en el botón 'Reintentar' se vuelve a cargar toda la página. Pero cuando el usuario hace clic en el botón "Reintentar", quiero volver a realizar la llamada a la API web fallida sin volver a cargar toda la página. Si esta llamada tiene éxito en el reintento, entonces el flujo de ejecución normal debería continuar sin interrupciones. Es posible que tenga que usar el interceptor de solicitudes http para angular 2 y promesas, pero no pude descubrir cómo implementarlas. ¿Podría ayudarme a encontrar la solución?

La llamada de mi archivo component.ts:

 this._accountdetailsService.getContacts(this.group.id) .subscribe( contacts => this.contacts = contacts, error => this.callErrorPage(error); );

_accountdetailsService es una instancia del servicio.

La llamada de mi archivo service.ts a la API web de back-end:

 getContacts(groupId: number): any { return this._http.get(this._serverName + 'api/CustomerGroups/' + groupId + '/contacts') .map(response => { if(response.status < 200 || response.status >= 300) { throw new Error('This request has failed' + response); } else { return response.json(); } }); }

Manejo de errores dentro del archivo component.ts:

 callErrorPage(error: any) { this.error = error; this.showErrorModal(); } onRetry() { this.hideErrorModal(); window.location.reload(); } showErrorModal(): void { this.errorModal.show(); } hideErrorModal(): void { this.errorModal.hide(); }

El componente de error común que se usa dentro del modal en todos los demás componentes se muestra a continuación:

error.componente.ts

 export class ErrorDetails implements OnInit { @Input() error; @Output() onRetry = new EventEmitter(); private sub: any; errorStatustext: string; errorMessage: string; constructor(private _route: ActivatedRoute) { } ngOnInit() { if (this.error.status == 0 || this.error.status == 500) { this.errorStatustext = "Sorry! Could not connect to server." } else { this.errorStatustext = this.error.statusText; var responseBody = JSON.parse(this.error._body); if (responseBody) { this.errorMessage = responseBody.resultText; } } } onRetryClick() { this.onRetry.emit(); }