当对 http 请求的响应有延迟时，如何在 angular 2 应用程序中实现加载微调器？

Question

"loading spinner" 如何在 angular 2 应用程序中实现响应延迟？

Answer 1

您可以通过多种方式完成此操作。我会提到两种方式：

比方说，属性属性的值取决于一些外部来源（即 http 调用），然后在您的模板中您可以执行以下操作：

  <ng-template *ngIf="prop else loading">
         {{prop}}
  </ng-template>
  <ng-template #loading>
    <div class="ajax-loader">
         <img src="/assets/ajax-loading-img.gif" >
    </div>
  </ng-template>

另一种方法是：

  export class YourComponent implements OnInit {
     isLoading = false;

    ngOnInit(){
       this.isLoading = true;
       this.http.get(this.apiendpoint)
           .do(()=> { // normal case scenario
               this.isLoading = false;
           }, ()=> { // error case scenario
               this.isLoading = false;
           })
           .subscribe( (data) => {
              // do your operation here. 

           });
    }
  }

在模板中：

  <ng-template *ngIf="isLoading">
    <div class="ajax-loader">
         <img src="/assets/ajax-loading-img.gif" >
    </div>
  </ng-template>

当对 http 请求的响应有延迟时，如何在 angular 2 应用程序中实现加载微调器？

How can be loading spinner implemented in angular 2 application when there is delay in response for http requests?

lazy-loading

loading

angular