Question

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

我正在使用<div class="spinner"></div>作为微调器视图。但是，需要一个更好的方法来显示加载器gif等。

我希望显示一个微调器，直到每个组件从服务器获取数据为止。怎么做？

service.ts

 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;
}

Answer 1

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

您还需要在app.component.ts：

中导入服务

app.component.ts：

constructor(
  public serviceName: ServiceName
  ...
)

app.component.html：

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

在你的服务中：

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;
}

Answer 2

只需要一个布尔值来跟踪调用是否正在进行

public inprogress = false;

在http调用之前将其设置为true，并在收到响应后将其设置为false

initData() {
    this.inprogress = true;
    this.DataService.getdata(clientJson).subscribe(
        success => this.bcdChart(success),
        error => this.errorMessage = error
    );
}
bcdChart(jsonData) {
    this.inprogress= false;
    /* ... */
}

如果您喜欢它，请保持简单并处理错误和成功，并且不要污染bcdChart方法，您可以这样做。

this.DataService.getdata(clientJson)
    .do(res => this.inprogress=false) 
    .subscribe(
        success => this.bcdChart(success),
        error => this.errorMessage = error
    );

Answer 3

创建一个名为show spinner
的函数
get（url：string，options？：RequestOptionsArgs）：Observable { this.showLoader（）;
```
    //return super.get ....
```
}

2.成功后隐藏装载机

private showLoader(): void {

            this.loaderService.show();
}
 private hideLoader(): void {
            this.loaderService.hide();
}

3.添加加载程序组件

    import { Component, OnInit, OnDestroy } from '@angular/core';
    import { Subscription } from 'rxjs/Subscription';
    import { LoaderService } from './loader.service';
    import { LoaderState } from './loader';
    @Component({
        selector: 'angular-loader',
        templateUrl: 'loader.component.html',
        styleUrls: ['loader.component.css']
    })
    export class LoaderComponent implements OnInit {
    show = false;
    private subscription: Subscription;
    constructor(private loaderService: LoaderService) { }
    ngOnInit() { 

            this.subscription = this.loaderService.loaderState
                .subscribe((state: LoaderState) => {
                    this.show = state.show;
                });
    }
    ngOnDestroy() {
         this.subscription.unsubscribe();
    }

    }

Loader组件视图

装载机服务

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { LoaderState } from './loader';
@Injectable()
export class LoaderService {
private loaderSubject = new Subject<LoaderState>();
loaderState = this.loaderSubject.asObservable();
constructor() { }
show() {
        this.loaderSubject.next(<LoaderState>{show: true});
    }
hide() {
        this.loaderSubject.next(<LoaderState>{show: false});
    }
}

如何显示一个微调器，直到从angular2中的服务器收到数据

service.ts

abc.component.ts

BCD-chart.component.ts

styles.css的

3 个答案: