如何以 Angular2 方式处理 ajaxStart 和 ajaxStop 事件答案

【问题标题】：How to handle ajaxStart and ajaxStop events in Angular2 way如何以 Angular2 方式处理 ajaxStart 和 ajaxStop 事件
【发布时间】：2016-04-25 23:33:47
【问题描述】：

我需要触发类似于JQuery事件ajaxStart和ajaxStop 我在这里找到了一半的解决方案-> How to set default HTTP header in Angular2? 所以，目前我可以处理ajaxStart 事件。

任何解决方案如何处理ajaxStop事件？

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    //onAjaxStart
    $( "#loader" ).show();
    return super.post(url, body, options); //Any method here to handle event?
}

我尝试使用.catch()，但它只会触发 onError

我需要在 ajax 触发时调用我的动画加载器，并在每次我使用 ajax 请求时停止时隐藏它。

所以我试图覆盖默认的 ajax 方法。但我找不到正确的可观察方法（

【问题讨论】：

这与您的问题无关，但是您为什么不使用 jQuery 而不是在元素上使用 if 语句并根据组件内部的变量显示/隐藏它们？我认为这通常是 Angular 的做事方式。

标签： javascript ajax angular angular2-http

【解决方案1】：

您可以利用 observable 的“finally”运算符。

这是一个使用示例：

post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
    //onAjaxStart
    $( "#loader" ).show();
    return super.post(url, body, options).finally(() => {
      //onAjaxStop
      $( "#loader" ).hide();
    });
}

【讨论】：

是的，它很酷，但我需要返回一个可观察的对象。因为我想将此重写方法称为简单的 post/get/etc 请求是的，它很酷，但我需要返回一个可观察的对象。因为我想将此覆盖的方法称为简单的 post/get/etc 请求 this.http.post("someult", string).map((res: Response) => res.json()) .subscribe().. ...等
这并不妨碍考虑可观察的 ;-) 我的意思是 finally 方法返回的那个。订阅时，您将收到请求的结果...