angular - Angular2 observables - ユーザーがログインしたときにサブスクライブが変数を更新しない

Question

そのため、ユーザーがログインしたときにメニューを更新しようとしています。同様の問題についていくつかの回答を読みましたが、まだ機能しません。

nav-bar.component.html:

<li *ngIf="isLoggedIn"><a routerLink="/" (click)="logout($event);"> {{ logoutLabel }}</a></li>
<li *ngIf="!isLoggedIn"><a routerLink="/login (click)="showPopup($event);">{{ loginLabel }}</a></li>

nav-bar.component.tsで、login-form でモーダルを開き、 login.serviceからの変数の変更も探します。

import { SuPopupLoginComponent } from '../shared/su-popup-login/su-popup-login.component';
import { LoginService } from '../login/login.service';
...imports...

@Component({
   selector: 'app-nav-bar',
   templateUrl: './nav-bar.component.html',
   styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {
  loginLabel: string;
  public isLoggedIn: boolean;

   constructor(private loginService: LoginService, private suPopupLoginComponent: SuPopupLoginComponent) {
      loginService.getIsLoggedIn.subscribe((bool: boolean) => {
         this.isLoggedIn = bool;
         console.log('NavBarComponent', this.isLoggedIn);
      });
   }

   showPopup(event) {
      event.preventDefault();
      this.suPopupLoginComponent.showPopup();

      If I call login here It works just as expected

      // this.loginService.login('test@test.se', 'Test123')
      //      .subscribe(
      //        data => {
      //          if (data) { // If login was successful data is true.
      //            let redirect = 'license-overview';
      //            this.router.navigate([redirect]);

      //          } 
      //        }
      //      );
  }  

   logout(event) {
      event.preventDefault();
      this.loginService.logout();
   }
   ngOnInit() { }
}

su-popup-login.component.ts - ログインフォームとログイン関数の呼び出し:

import { LoginService } from '../../login/login.service';
import { Injector } from '@angular/core';

@Component({
  selector: 'su-popup-login',
  templateUrl: './su-popup-login.component.html',
  styleUrls: ['./su-popup-login.component.scss'],
  providers: [LoginService]
})

export class SuPopupLoginComponent implements OnInit {

   constructor(private loginService: LoginService, private injector: Injector) { }

   public showPopup() {
     Css and showing modal
   }

   login(event, mail, password) {
      this.loginService.login(mail, password)
         .subscribe(
            data => {

              if (data) { // If login was successful data is true.

              // Navigate to view after login success.
              this.router = this.injector.get(Router);
              let redirect = 'license-overview';
              this.router.navigate([redirect]);

        }
      }
    );
   }

login.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoginService {
   private isLoggedInSource = new BehaviorSubject<boolean>(localStorage.getItem('currentUser') ? true : false);
   public _isLoggedIn: Observable<boolean> = this.isLoggedInSource.asObservable();

   constructor(private http: Http) { }

   private isLoggedIn(logged: boolean) {
      this.isLoggedInSource.next(logged);
   }

   get getIsLoggedIn() {
      return this._isLoggedIn;
   }

   login = (mail: string, password: string): Observable<boolean> => {
   let loginUrl = '/api/authenticate';
   let body = JSON.stringify({ mail, password });

   return this.http.post(loginUrl, body)
      .map((response: Response) => {
          let user = response.json();

          if (user && user.tokenId) {
            this.isLoggedIn(true);

            // Add to local storage
           localStorage.setItem('currentUser', JSON.stringify({ mail: mail, tokenId: user.tokenId }));
           return true;  // Login success
         }
         else {
           return false; // Login failed
         }
      });
   }
}

nav-bar.componentthis.loginService.login('user', 'pass')から呼び出すと正常に動作しますが、 su-popup-login.component.tsからログインが呼び出された場合は動作しません。また、from nav-bar.component.tsは正常に機能します。this.loginService.logout()

サブスクライブ呼び出しは、ログイン/ログアウトの呼び出しと同じコンポーネントにある必要がありますか? もしそうなら、私はオブザーバブルがどのように機能するかを理解していないと思います。

ヘルプやコメントに感謝します。