로딩 스피너 표시 및 숨기기 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 요청 중에 호출하는 또 다른 서비스입니다.

는

....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()); 
    } 

} 

문제는 스피너는 항상 볼 수 있다는 것입니다 apartment.service.ts. 로딩 과정뿐만 아니라 나는 내가 잘못한 것을 볼 수 없다. 어떤 생각?

Answer 1

난 당신이 (가) visible 상태에 따라/숨기기를 보여 바인딩 누락 생각 : 내가 생각

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