rxjs observables angulaire 2 sur localstorage changement

Je suis en train de créer une observable qui renvoie des valeurs lorsque les modifications apportées à un localStorage variable qui se passe. Mon abonné est de ne pas obtenir les nouvelles valeurs sur des changements localStorage (ou une variable de mémoire).

navbar.component.js

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

/**
 * This class represents the navigation bar component.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-navbar',
  templateUrl: 'navbar.component.html',
  styleUrls: ['navbar.component.css'],
  providers: [UserService]
})

export class NavbarComponent implements OnInit {
  loggedIn: boolean;
  constructor(private us: UserService) { }

  ngOnInit() {
    this.us.isLoggedIn().subscribe(loggedIn => {
      this.loggedIn = loggedIn;
    });
  }
}

auth.composante.ts

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

/**
 * This class represents the lazy loaded AuthComponent.
 */
@Component({
  moduleId: module.id,
  selector: 'sd-auth',
  templateUrl: 'auth.component.html',
  styleUrls: ['auth.component.css'],
  providers: [UserService]
})
export class AuthComponent implements OnInit {
  authParams = {
    provider: '',
    params: {}
  };

  constructor(private route: ActivatedRoute, private us: UserService) { }
  ngOnInit() {
    this.route.params.forEach((param) => {
      this.authParams.provider = param.authprovider;
    });

    this.route.queryParams.forEach((queryParams) => {
      this.authParams.params = queryParams;
    });

    this.us.logIn("google", JSON.stringify(this.authParams));

    console.log(JSON.parse(localStorage.getItem('authParams')));

  }
}

de l'utilisateur.service.ts

//user.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';

@Injectable()
export class UserService {
  private loggedIn = false;
  private logger = new Observable<boolean>((observer: Subscriber<boolean>) => {
    observer.next(this.loggedIn);
  });
  constructor() {
    if (localStorage.getItem('authParams')) {
      this.loggedIn = !!JSON.parse(localStorage.getItem('authParams')).params.id_token;
    } else {
      this.loggedIn = false;
    }
  }

  logIn(provider: string, providerResponse: string) {
    localStorage.setItem('authParams', providerResponse);
    this.loggedIn = true;
  }

  isLoggedIn(): Observable<boolean> {
    return this.logger;
  }

  logOut() {
    localStorage.removeItem('authParams');
    this.loggedIn = false;
  }
}

Flux ressemble

Étape 1 - barre de navigation s'abonne à UserService (Obtient la valeur par défaut de loggedIn=false)
Étape 2 - AuthComponent mises à jour UserService (jeux de loggedIn = true)

Mon abonnement dans la barre de navigation n'est pas mis à jour. Ce qui me manque ici. Dois-je mettre quelque chose dans la méthode de logIn de UserService comme l'événement de l'émetteur?

OriginalL'auteur Prabhat | 2016-11-03