角度2のモーダルポップアップで[再試行]ボタンをクリックすると失敗したWeb API呼び出しを再試行し、呼び出しが「再試行」で成功した場合は実行を続行します

Question

角度2のアプリでは、コンポーネントからサービスおよびサービスバックエンドWeb APIに送信します。 Web APIから得られた応答は、サービスからコンポーネントに返され、コンポーネント内の応答に加入しています。エラー処理のために、私はアプリケーション全体で使用される一般的なエラーコンポーネントを使用しています。このエラーコンポーネントは、他のコンポーネント内のモーダルポップアップとして使用されます。エラーが発生した場合、このモーダルは「再試行」ボタンでポップアップします。現在、[再試行]ボタンをクリックすると、ページ全体が再度読み込まれます。しかし、ユーザーが「再試行」ボタンをクリックすると、ページ全体を再ロードすることなく、失敗したWeb APIコールを再作成したいと考えています。この呼び出しが再試行で成功した場合、正常な実行フローは中断することなく続行する必要があります。私は、角度2と約束のためにhttpリクエストインターセプターを使わなければならないかもしれませんが、それらを実装する方法を理解できませんでした。あなたは私が解決策を見つけるのを助けてくれますか？

私component.tsからの呼び出しファイル：

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

_accountdetailsS​​erviceがサービスのインスタンスです。

エンドWeb APIをバックアップする私のservice.tsファイルからの呼び出し：

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

} 

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

内部で使用される一般的な誤差成分他のすべての構成要素のモーダルは次のとおりです。

error.component.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(); 
} 

Answer 1

私の考えが実用的かどうかはわかりません。私はそれを試してみたいです。あなたのcomponent.tsで

：

retryAction: any; 

callErrorPage(error: any, retryAction: any) { 
    this.error = error; 
    this.retryAction = retryAction; 
    this.showErrorModal(); 
} 

onRetry() { 
    this.hideErrorModal(); 
    //window.location.reload(); 
    this.retryAction(); 
} 

onGetCountacts() { 
    let that = this; 
    this._accountdetailsService.getContacts(this.group.id) 
     .subscribe(
      contacts => this.contacts = contacts, 
      error => this.callErrorPage(error,() => { that.onGetCountacts(); }); 
       ); 
}