Angular2 event.nextはHTTP応答後に起動されません

Question

私は奇妙な状況があります。私は、ユーザーがログインしているときにのみ表示するnavコンポーネントを持っています。デフォルトではfalseの変数を使用して管理しようとしています。ユーザーがログインすると、値はtrueになり、メニューが表示されます。

現在、ユーザーがMenuComponentのログアウトリンクをクリックすると、イベントが送出され、値が変更されます。しかし、ログイン時には、httpの応答の後、それはトリガーされていません。ここで

がメニューコンポーネントです。この中

import { Component, OnInit } from '@angular/core'; 
import { UserService } from './../user/user.service'; 
import { Router } from '@angular/router'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-navigation', 
    templateUrl: 'navigation.component.html', 
    styleUrls: ['navigation.component.css'], 
    providers: [UserService] 
}) 
export class NavigationComponent implements OnInit { 
    public menuStatus; 
    constructor(private userService: UserService, private router: Router) { 
    this.menuStatus = userService.isLoggedIn(); 
    } 
    ngOnInit() { 
    this.userService.userLoggedOut$.subscribe(data => { 
     console.log('userLoggedOut subscribe'); 
     this.menuStatus = data; 
    }); 

    this.userService.userLoggedIn$.subscribe(data => { 
     console.log('userLoggedIn subscribe'); 
     this.menuStatus = data; 
    }); 
    } 
    logout() { 
    this.userService.userLogout(); 
    this.router.navigate(['/login']); 
    } 
} 

、ログアウトボタンをクリックすると、ログアウト機能をトリガします。ユーザーサービスuserLogout関数にはイベントエミッターがあります。ここではイベント・エミッターは、次のとおりです。

import {Injectable} from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import { Subject } from 'rxjs/Subject'; 
import { Config } from './../shared/config'; 

@Injectable() 
export class UserService { 
    private loggedIn; 
    private userLoginUpURL; 
    private userLoggedInEvent = new Subject(); 
    private userLoggedOutEvent = new Subject(); 

    userLoggedIn$ = this.userLoggedInEvent.asObservable(); 
    userLoggedOut$ = this.userLoggedOutEvent.asObservable(); 

    constructor(private http: Http, private config: Config) { 
    this.loggedIn = false; 
    this.loggedIn = !!localStorage.getItem('access_token'); 
    this.userLoginUpURL = this.config.loginUrl; 
    } 

    getUserObject() { 
    return JSON.parse(localStorage.getItem('user_object')); 
    } 

    userLogin(userLoginDetails) { 
    let headers = new Headers({ 
     'Content-Type': 'application/json' 
    }); 

    let postData = { 
     email: userLoginDetails.email, 
     password: userLoginDetails.password 
    }; 

    return this.http 
     .post(this.userLoginUpURL, JSON.stringify(postData), {headers: headers}) 
     .toPromise() 
     .then(res => { 
     localStorage.setItem('access_token', res.json().access_token.access_token); 
     localStorage.setItem('user_object', JSON.stringify(res.json().user)); 
     this.loggedIn = true; 
     this.userLoggedInEvent.next(this.loggedIn); 
     return res.json(); 
     }) 
     .catch(this.handleError); 
    } 

    userLogout() { 
    // destroy the local storage variabled 
    localStorage.removeItem('access_token'); 
    localStorage.removeItem('user_object'); 

    // setup the login status to false 
    this.loggedIn = false; 
    this.userLoggedOutEvent.next(false); 
    } 

    isLoggedIn() { 
    return this.loggedIn; 
    } 

    private handleError(error: any) { 
    return Promise.reject(error.message || error); 
    } 
} 

問題は、私はthis.userLoggedInEvent.next（this.loggedIn）を呼び出すいたときにログインした後、ある、イベントは発生しません。

助けてもらえますか？ウィンドウを更新してユーザーをダッシュ​​ボードにリダイレクトできる簡単な修正はありますが、ページを更新して正しい方法で行う必要はありません。助けてください。

Answer 1

すると、共通の親に一度だけ（ルートコンポーネント）それ以外の場合は、異なるコンポーネントが異なるインスタンスを取得し、あなたが呼ぶのですかずっと;-)