角2 - 条件付きヘッダー

Question

ホーム、私たちについて、私たちについて、登録、ログイン、ログアウト、登録などのいくつかのボタンがあるヘッダーがあり、ログインしたときだけ登録してくださいユーザーがログに記録されていない場合は2つです。

私はこのようなものを使用することができます知っている：

<li *ngIf="!isUserLoggedIn"><a href="#">Log in</a></li> 
<li *ngIf="isUserLoggedIn"><a href="#">Log out</a></li> 
<li *ngIf="!isUserLoggedIn"><a href="#">Register</a></li> 

を、それはユーザーがログインしているかどうかを確認するために、ヘッダーからサービスを呼び出すと、この変数を初期化するために、おそらく悪い考えです。私は正しい？私が何をしたか

Answer 1

されました：

1 - 認証状態を表して設定された変数のために責任がある認証サービスを作成します。

2 - auth status変数をObservation変数に設定します。

3 - ヘッダーコンポーネントで、このauthサービス変数オブザーバにサブスクライブし、次にauth変数のステータスに基づいてヘッダーモードを変更できます。例えば

：

auth.service.ts

Psと。 authStateSubjectを宣言するときは、localStorage.getItem('authState')に注意してください。この方法で、ユーザーの現在の状態を取得できます。

... 
@Injectable() 
export class AuthService { 

    // you can get the actual state from memory here 
    private authStateSubject: BehaviorSubject<Boolean> = new BehaviorSubject<Boolean>(localStorage.getItem('authState')); 

    state: Observable<Boolean> = this.authStateSubject.asObservable(); 
... 

header.component.ts

... 
@Component({ 
    ... 
}) 

export class SidenavLeftComponent { 

    isUserLoggedIn: boolean; 

    constructor(private authService: AuthService) { 
    ... 
    } 

    ngOnInit(){ 
    // update auth status when it changes 
    this.authService.state.subscribe(state => this.isUserLoggedIn = state); 
    } 

} 
... 

header.component.html

... 
<li *ngIf="!isUserLoggedIn"><a href="#">Log in</a></li> 
<li *ngIf="isUserLoggedIn"><a href="#">Log out</a></li> 
<li *ngIf="!isUserLoggedIn"><a href="#">Register</a></li> 
... 

ユーザーがログインすると、あなたはauth.service.tsでこのメソッドを呼び出す this.authStateSubject.next(true);

ユーザーがログアウトすると、このメソッドがauで呼び出されますth.service.ts this.authStateSubject.next(false);

こうして、すべての加入者は新しい値に気付き、それを処理します。