Question

我想在http请求时显示加载程序

return this.http.get(this._apiUrl)
            //.map(res =><Location[]> res.json())
            .map(res => res.json())
            .filter(x => x.length > 0)
            .delay(5000)
            .catch(this.handleError);

在上面的代码中我可以指定加载器模板吗？

Answer 1

您必须阅读我们的对话。如果没有，请先阅读。然后你可以尝试这个解决方案。

您将返回observer。我在此考虑可能是您的fetch function写在某些external service。

fetch(){ 
return this.http.get(this._apiUrl) //.map(res => res.json()) .map(res => res.json()) .filter(x => x.length > 0) .delay(5000) .catch(this.handleError); 
}

所以，我建议在订阅像这样的返回观察者之前添加它，

this.isLoading=true;
this.externalService.fetch.subscribe((result) =>{ 
                    this.result =result
                    },
                    (err)=>console.log(err),
                    ()=>{console.log("Done")
                          this.isLoading=false;
                    });

}

选中此项以获取参考http://plnkr.co/edit/UMMFk57seNrxqdgyeQIT?p=preview

Answer 2

Http本身并不能为展示加载器提供任何直接支持。

只需在组件或服务中设置字段

即可

fetchData() {
  this.isLoading = true;
  return this.http.get(this._apiUrl)
        //.map(res =><Location[]> res.json())
        .map(res => res.json())
        .filter(x => x.length > 0)
        .delay(5000)
        .catch(this.handleError)
        .do(this.isLoading = false);
}

然后将加载程序的可见性绑定到isLoading

<my-loader *ngIf="isLoading"></my-loader>

angular2 Http请求中的加载器

2 个答案: