http 요청에 대한 응답이 지연되는 경우 각도 2 애플리케이션에 구현 된 회 전자를로드하는 방법은 무엇입니까?

Question

응답이 지연되면 앵귤러 2 응용 프로그램에서 구현되는 "로딩 스피너"는 어떻게 될 수 있습니까?

Answer 1

할 수있는 방법이 몇 가지 있습니다. 나는 두 가지 방법을 언급합니다 :

는 말할 수 있습니다 prop 속성의 값은 일부 외부 소스 (예 : 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. 

      }); 
    } 
    } 

:. 내가 this.http.get (...)`제안

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