web-dev-qa-db-ja.com

rxjs observable angular 2 localstorage変更時

LocalStorage変数の変更が発生したときに値を返すObservableを作成しようとしています。私の加入者は、localStorageの変更時に新しい値を取得していません（または、メモリ内変数）。

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.component.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')));

  }
}

user.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;
  }
}

フローは次のようになります

ステップ1-NavbarはUserServiceにサブスクライブします（loggedIn = falseのデフォルト値を取得します）ステップ2-AuthComponentはUserServiceを更新します（loggedIn = trueに設定します）

Navbarのサブスクリプションが更新されていません。ここに何が欠けていますか。イベントエミッターのようなUserServiceのlogInメソッドに何かを入れる必要がありますか？

angularlocal-storagerxjs
14
Prabhat

欲しいのは件名です。こちらのドキュメントをご覧ください（ https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/subjects/subject.md ）

簡単な例として、このようなもの：

export class UserService {
  ...
  private logger = new Subject<boolean>();
  ...

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

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

  logOut() {
    localStorage.removeItem('authParams');
    this.loggedIn = false;
    this.logger.next(this.loggedIn);
  }
...
13
Fiddles

より正確にするには、import { BehaviorSubject } from 'rxjs/BehaviorSubject';のBehaviourSubjectを使用します

例：

@Injectable()
export class UserService {

  public username = new BehaviorSubject<string>('');
  public preferredLanguage = new BehaviorSubject<string>('');
  public preferredTimezone = new BehaviorSubject<string>('');

  constructor(
    private router: Router,
    private jwtTokenService: JwtTokenService
  ) {
    let token: string = localStorage.getItem('token'); // handled for page hard refresh event
    if (token != null) {
      this.decode(token);
    }
  }

  private decode(token: string) {
    let jwt: any = this.jwtTokenService.decodeToken(token);
    this.username.next(jwt['sub']);
    this.preferredLanguage.next(jwt['preferredLanguage']);
    this.preferredTimezone.next(jwt['preferredTimezone']);
  }

  public setToken(token: any) {
    localStorage.setItem('auth_token', token);
    this.decode(token);
  }

}

behaviorSubjectとObservableの違いを学習するには： Angular 2-Behavior Subject vs Observable？

1
virsha

別の方法は、storageイベントを監視することです

fromEvent(window, 'storage').subscribe((storageEvent) => {
  //do what you need to do with your storageEvent
})

これは、サービス層でネイティブAPIをラップする必要がないことを意味します。

0
Mike Miller