погрузчик в angular2 Http запрос

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

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> 

Answer 2

Вы должны прочитать наш разговор. Если нет, прочитайте сначала. то вы можете попробовать это решение.

Вы собираетесь вернуть 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