Angular 4: Bedingte Anzeige auf Benutzerstatus

Question

hier ist das Problem:

Ich versuche, dieses kleine Tutorial zu folgen, um eine bedingte Anzeige in meiner aktuellen App zu machen, je nach Benutzer LoggedIn Status. Hier ist der Link:

https://loiane.com/2017/08/angular-hide-navbar-login-page/

Es sieht ziemlich einfach & effizient. Aber ich kann es nicht in meiner aktuellen Anwendung arbeiten. Im Anschluss an die Haupt-Tutorial Richtlinien, komme ich zu diesem Code:

Top-menu.component.ts:

authStatus: Observable<boolean>; 

constructor(private authService: AuthService){ 
} 

ngOnInit(){ 
    this.authStatus = this.authService.isLoggedIn(); 
} 

login(){ 
    this.authService.login(); 
} 

logout(){ 
    this.authService.logout(); 
} 

Top-menu.component.html:

<li><span (click)="login()">LOGIN</span></li> 
<li><span (click)="logout()">LOGOUT</span></li> 
//... 
<li *ngIf="authStatus | async"><a [routerLink]="['/login']">CONDITIONAL LOGIN</a></li> 
<li *ngIf="!authStatus | async"><a [routerLink]="['/logout']">CONDITIONAL LOGOUT</a></li> 

auth.service.ts:

public loggedIn = new BehaviorSubject<boolean>(false); 

get isLoggedIn(){ 
    return this.loggedIn.asObservable(); 
} 

login(){ 
    this.loggedIn.next(true); 
} 

logout(){ 
    this.loggedIn.next(false); 
} 

Kann mir jemand erklären, was ich falsch mache ...? Ich habe einige andere Beispiele im Internet, aber ohne Erfolg ...

Dank für das Lesen/help

Answer 1

Versuchen Sie, diese

login(){ 
    this.authStatus = this.authService.login(); 
} 

logout(){ 
    this.authStatus = this.authService.logout(); 
} 

entfernen Konstruktor onint Code

Answer 2

EDIT

Hier ist der Link plunkr

authStatus: boolean; 
subscription: Subscription; 
constructor(private authService: AuthService){ 
    this.subscription = this.authService.isLoggedIn().subscribe(result => { 
     this.authStatus = result; 
    }); 
} 

ngOnInit(){ 
    // this.authStatus = this.authService.isLoggedIn(); 
} 

login(){ 
    this.authService.login(); 
} 

logout(){ 
    this.authService.logout(); 
} 

, wenn Sie auf logout/login jeweiligen Status wird in this.authStatus aktualisiert werden und zu HTML easly binden können

isLoggedIn Funktion können Sie die beobachtbaren zurückgibt, die in Konstruktor abonniert werden kann. Keine Notwendigkeit, in ngOnInit this.authStatus = this.authService.isLoggedIn(); hinzuzufügen, weil dann this.authStatus Instanz von Observable anstatt boolescher Wert werden würde, den wir benötigen.