각도 4 : 사용자 상태에 조건부 표시

Question

여기에 문제가 있습니다 :

사용자 로그인 상태에 따라 현재 응용 프로그램에서 일부 조건부 표시를 만들기 위해이 작은 자습서를 따르려고합니다.

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

그것은 효율적 & 아주 간단 보인다 : 여기에 링크입니다. 그러나 현재 응용 프로그램 내에서 작동시키지 못합니다.

최고 menu.component.ts :

authStatus: Observable<boolean>; 

constructor(private authService: AuthService){ 
} 

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

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

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

최고 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); 
} 

아무도 내가 잘못한 것을 설명 할 수 있습니까? ...? 나는

Answer 1

는, 생성자에서 제거 onint 코드이

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

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

을 시도해보십시오 인터넷에서하지만 성공 다른 예 ... 읽기/도움을

감사를 확인

Answer 2

편집

여기 링크 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(); 
} 

당신이 로그 아웃/로그인 각각의 상태를 클릭은 this.authStatus에 업데이 트하고 easly

isLoggedIn 기능은 당신에게 생성자에서 가입 할 수있는 관찰을 반환 HTML에 바인딩 할 수 있습니다. ngOnInit에 this.authStatus = this.authService.isLoggedIn();을 추가 할 필요가 없습니다. 왜냐하면 this.authStatus가 우리가 요구하는 부울 값이 아닌 Observable의 인스턴스가 될 것이기 때문입니다.