如何显示微调框，直到在angular2中从服务器接收到时间数据为止 [英] how to show a spinner till the time data recieved from the server in angular2

问题描述

该项目有一个service.ts来进行ajax调用(http.post)，几个组件(abc.component.ts，bcd.component.ts等)通过service.ts从服务器获取数据.

The project have a service.ts to make ajax call(http.post) and several components(abc.component.ts, bcd.component.ts etc) gets the data from the server through service.ts

我在旋转器视图中使用<div class="spinner"></div>.但是，需要一种更好的方法来显示gif等加载程序.

I am using <div class="spinner"></div> for the spinner view. But, need a better approach to show loader either gif etc.

我想展示一个微调器，直到每个组件从服务器获取数据为止.怎么做?

I want to show a spinner till the time each component fetch data from the server. How to do that?

 getdata(){
      let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });
        let url = "http://883.82./Ser/soSe"; 
        return this.http.post(url, clientJson).map((res: Response) => res.json());
    }

abc.component.ts

let clientJson = {
        "aoId": "M_AO_918",
        "viewBys": ["usstate"],
        /* ... */
    };
  this.DataService.getdata(clientJson).subscribe(
        success => this.abcChart(success),
        error => this.errorMessage = error
    );
abcChart(jsonData) {
    /* ... */
}

bcd-chart.component.ts

 initData() {
        let clientJson = {
            "aoId": "M_AO_918",
            "viewBys": ["brands"], 
            /* ... */ 
        };
        this.DataService.getdata(clientJson).subscribe(
            success => this.bcdChart(success),
            error => this.errorMessage = error
        );
    }
    bcdChart(jsonData) {
        /* ... */
    }

styles.css

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
.loading{
  background-color: #d35400;
}

推荐答案

在保存<router-outlet></router-outlet>的主html文件中，您需要保留spinner的html，以便可以在整个角度应用中的任何组件中显示它:

In your main html file where you keep <router-outlet></router-outlet> you need to keep the html of spinner so you can show it in any component throughout your angular app :

您还需要在app.component.ts中导入服务:

You also need to import service in the app.component.ts:

app.component.ts:

app.component.ts:

constructor(
  public serviceName: ServiceName
  ...
)

app.component.html:

app.component.html:

<router-outlet></router-outlet>
<div *ngIf="serviceName.showSpinner" class="spiner">
    <!-- svg or gif of spinner  -->
</div>

在您的service.ts中:

In your service.ts:

public showSpinner: boolean = false;

getdata() {
    // show spinner when we start making request

    this.showLoadingSpinner();
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let url = "http://883.82./Ser/soSe"; 
    return this.http.post(url, clientJson,clientJson1).map((res: Response) => {
      // response received so hide spinner now
      this.hideLoadingSpinner();
      return res.json();
    });
}

showLoadingSpinner() {
    this.showSpinner = true;
}

hideLoadingSpinner() {
    this.showSpinner = false;
}

这篇关于如何显示微调框，直到在angular2中从服务器接收到时间数据为止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！