在 HTTP 上使用 Angular 显示和隐藏加载微调器

Question

我在最后几天尝试从 AngularJS 迁移到 Angular。我已经有一个网络应用程序，我想重写它以进行锻炼。我在旧版本中的一项功能是在 HTTP 请求期间加载微调器。我在 Google 和在线教程上进行了搜索，以了解如何使用 Angular 做到这一点，然后我选择了一项服务。代码如下：

spinner.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs/Rx';

export interface ISpinnerState {
  show: boolean
}

@Injectable()
export class SpinnerService {
  private _spinnerSubject = new Subject();

  spinnerState = <Observable<ISpinnerState>>this._spinnerSubject;

  show() {
    this._spinnerSubject.next(<ISpinnerState>{ show: true });
  }

  hide() {
    this._spinnerSubject.next(<ISpinnerState>{ show: false });
  }
}

spinner.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import { Subscription } from 'rxjs/Rx';

import { ISpinnerState, SpinnerService } from './spinner.service';

@Component({
  selector: 'loading-spinner',
  template: `
    <div
      class="spinner">
    </div>
  `,
  styles: [`.spinner {position: absolute;left: 46%;top: 12%;background-color:black;width:50px;height:50px}`]
})

export class SpinnerComponent implements OnDestroy, OnInit {
  visible = false;

  private _spinnerStateChanged: Subscription;

  constructor(private _spinnerService: SpinnerService) { }

  ngOnInit() {
    this._spinnerStateChanged = this._spinnerService.spinnerState
      .subscribe((state: ISpinnerState) => this.visible = state.show);
  }

  ngOnDestroy() {
    this._spinnerStateChanged.unsubscribe();
  }
}

目前，它只是一个黑色方块，所以我可以测试它。之后，我将添加一个适当的加载图标。这是我在 HTTP 请求期间调用的另一个服务。

apartment.service.ts

....other stuff

@Injectable()
export class ApartmentService {

  constructor(
    private _http: Http,
    private _spinnerService: SpinnerService
  ) { }

getApartments() {
    this._spinnerService.show();
    return this._http.get(API + 'apartments')
      .map((response: Response) => <Apartment[]>response.json().apartments)
      //.catch(this._exceptionService.catchBadResponse)
      .finally(() => this._spinnerService.hide());
  }

}

问题是微调器总是可见的。不仅在加载过程中。我看不出我做错了什么。有什么想法吗？

Answer 1

我认为您缺少根据visible 状态显示/隐藏的绑定：

<div *ngIf="visible"
  class="spinner">
</div>