스피너 BehaviorSubject 및 비동기

Question

를 사용하여 표시하지 난 내 응용 프로그램의 글로벌 회 전자를 수용 할 수있는 다음과 같은 서비스가 : 방금 내 주요 응용 프로그램 구성 요소에서 내 router-outlet 위 다음 다음

@Injectable() 
 
export class SpinnerService { 
 
    private visible = new BehaviorSubject <boolean> (true); 
 

 
    showSpinner() { 
 
    this.visible.next(true); 
 
    } 
 

 
    hideSpinner() { 
 
    this.visible.next(false); 
 
    } 
 

 
    getSpinnerVisibility(): Observable <boolean> { 
 
    return this.visible.asObservable(); 
 
    } 
 
}

을 :

<app-spinner *ngIf="spinnerService.getSpinnerVisibility() | async"></app-spinner>

그러나은 실제로 표시하지 않습니다. 왜 어떤 생각? providers 배열의 SpinnerService을 AppModule이라고 선언했습니다.

<div class="backdrop"><div class="spinner"></div></div>

그것에 다른 절대적으로 아무것도 없습니다 :

다음은 회 전자 구성 요소입니다! 위의 *ngIf 문을 제거하면 올바르게 표시되므로 CSS에 문제가 없음을 의미합니다.

Answer 1

예제를 닮은 사람을 넣을 수 있었지만 (회 전자 구성 요소가 어떻게 생겼는지 모르겠다.) 사용하지 않았다. 비동기 파이프하지만 난 그냥 관찰 가능한 같은 행동 주체 반환이 솔루션과 plunker입니다

isLoading(): Observable<boolean> { 
return this._loadingState; 
} 

(내가이 경우에 생각하는 것만으로는 충분 또한 단지 typings를 사용하여 안전합니다).

http://plnkr.co/edit/bYG9IEsIow24zfvxQOKT