Показать и скрыть загрузчик с помощью Angular по HTTP

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>