Spinner Zeigen Nicht BehaviorSubject und Asynchron mit

Ich habe den folgenden Service für einen globalen Spinner in meiner App aufnehmen:Spinner Zeigen Nicht BehaviorSubject und Asynchron mit

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

Dann wird die gerade über meiner router-outlet in meiner Haupt-App-Komponente folgend :

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

Aber spinnerService.showSpinner() löst nicht aus, dass es angezeigt wird; irgendeine Idee warum? Ich habe SpinnerService im providers Array meines AppModule erklärt.

Hier ist der Spinner-Komponente:

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

Es gibt absolut nichts anderes zu ihm! Und wenn ich die obige *ngIf-Anweisung entferne, wird sie übrigens korrekt angezeigt, was bedeutet, dass mit dem CSS nichts falsch ist.

Quelle

2017-05-16 Sammy

Was ist Ihr 'app-spinner' Komponente aussieht? – echonax

Da ich noch nie eine Async-Pipe mit einem "Subject" eines beliebigen Typs oder einer "ngIf" -Bedingung verwendet habe, wäre das Konzept für das Funktionieren des Konzepts suspekt. Haben Sie versucht, ein Abonnement für eine grundlegende boolesche Eigenschaft zu verknüpfen, um zumindest diesen Teil des Konzepts zu bestätigen? Ist Ihr Hauptzweck hier vielleicht ein "Lade" -Spinner? –

Ja, das Konzept ist einfach ein Loader. Ok, ich werde versuchen, eine einfache Verbindung mit einem booleschen Subskribenten/Abmelden herzustellen und zu sehen. – Sammy

Ich habe etwas hinzugefügt, das Ihrem Beispiel ähneln kann (aber ich bin mir nicht sicher, wie Ihre Spinner-Komponente aussieht) und ich habe das | nicht benutzt Asynchron-Rohr, aber ich nur das Verhalten Subjekt als beobachtbare zurückkehrt (i in diesem Fall denken ist sicher genug auch nur die Typisierungen verwendet)

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

ist dies die Plunker mit der Lösung.

http://plnkr.co/edit/bYG9IEsIow24zfvxQOKT

Quelle

2017-05-16 13:07:52

Spinner Zeigen Nicht BehaviorSubject und Asynchron mit

Antwort

Verwandte Themen