0

在我的应用程序中，当我单击一个按钮时，我想显示一个微调器。

我从这个网址得到了一个简单的 CSS 微调器： https ://projects.lukehaas.me/css-loaders/

我将 css 添加到我的main.css文件中，然后在我的文件中添加了这行代码 app.component.html：

<div class="loader">Loading...</div>

我选择的原因app.component.html是我想让这个微调器在我的应用程序中随处可用..

但是现在点击按钮我正在从数据库中获取人员列表。这就是它的外观（我的组件）：

export class PersonComponent implements OnInit {

  private modalId: string;
  private persons: Array<Person>;

  constructor(private personsService: PersonsService) {}

  ngOnInit() {}

  // Here I'm getting data from database and I would like to display spinner/loader until all of data is loaded
  show() {
    $('#' + this.modalId).modal('show');
    this.personsService.getAll().do(data=>console.log(data)).subscribe(persons => this.persons = persons);
  }
}

这是我的app.component.html

<router-outlet></router-outlet>

<div class="loader">Loading...</div>

这是我PersonsService.ts负责从数据库中获取数据的：

@Injectable()
export class PersonsService {

  public showSpinner: boolean = false;

  constructor(private _http: HttpClient) { }

  getAll(): Observable<Person[]> {
    this.showSpinner(); //Cannot invoke expression whose type lacks a call signature. -> I got this error here
    return this._http.get<Person[]>(apiUrl)
      .catch(
      (error: HttpErrorResponse) => {
          return Observable.throw(error);
      });
  // Somewhere here I would hide a spinner? Is this possible, I mean will this be shown when data is fully loaded or ?
  }


  displaySpinner() {
    this.showSpinner = true;
  }

  hideSpinner() {
    this.showSpinner = false;
  }

我的 app.component.html 中可能需要一些 if 条件，所以它可能看起来像这样？：

<div *ngIf="personsService.showSpinner" class="loader">
    Loading...
</div>

或者我需要做这样的事情？：

<div *ngIf="personsService.showSpinner">
    <div class="loader">Loading...</div>
</div>

然而，这现在不起作用，我不知道如何实现这一点，在服务从数据库获取数据时简单地显示微调器，并在获取所有数据时隐藏它..

多谢你们

干杯

4

2 回答 2

1

您可以显示隐藏并知道数据库加载成功并使用角度观察选项读取完整响应

getAll(): Observable<HttpResponse<Person[]> {
        return this._http.get<Person[]>(apiUrl,{ observe: 'events' })
          .catch(
          (error: HttpErrorResponse) => {
              return Observable.throw(error);
          });
      // Somewhere here I would hide a spinner? Is this possible, I mean will this be shown when data is fully loaded or ?
      }

您可以在服务上设置微调器，也可以在订阅 getAll() 可观察示例的组件内更改微调器的状态

组件.ts

this.service.getAll().subscribe((response:HttpEvent<Object>)=>{
  //console.log(response);
  //import the HttpEventType from @angular/common/http
  if(response.type==HttpEventType.DownloadProgress){
    this.showSpinner = true;
  }
  if(response.type==HttpEventType.Response){
  this.showSpinner = true;
  }
})
于 2018-07-13T09:08:24.290 回答
0

修改您的服务以使用 aBehaviorSubject而不是普通的boolean，并利用 rxjspipe和tap运算符，以便您可以在服务本身中设置微调器标志，而不是在每个服务使用者组件中切换。

@Injectable()
export class PersonsService {

  public showSpinner: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public readonly apiUrl = "https://api.github.com/users";

  constructor(private _http: HttpClient) { }

  getAll(): Observable<Person[]> {
    this.showSpinner.next(true);
    return this._http.get<Person[]>(this.apiUrl).pipe(
      tap(response => this.showSpinner.next(false), 
      (error: any) => this.showSpinner.next(false))
    );
  }
}

您可以使用async管道访问showSpinner 

<div class="loader" *ngIf="_personService.showSpinner | async">
</div>
<div *ngIf="!(_personService.showSpinner | async)">
  <button (click)="foo()">Click here</button>
  <pre>
    {{response | json}}
  </pre>
</div>

演示

于 2018-07-13T09:47:30.913 回答