Как подписаться на localalstorage в angular 7 - PullRequest
0 голосов
/ 16 января 2019

Я хочу общаться между родительскими и дочерними вкладками. Я получу некоторые данные на дочерней вкладке (другой компонент, чем родительский), а затем отправлю эти данные родителю. Я думаю, что использование браузера localstorage является правильным способом. Поэтому я вставляю данные в localstorage и хочу, чтобы родительский компонент автоматически воспринял это изменение, получил данные из localstorage и закрыл дочернее окно.

У меня есть 2 компонента для родительских и дочерних окон и один сервис для localalstorage подписки. Проблема в том, что родительский компонент не видел изменений, потому что я меняю тему с «следующий» от дочернего.

Сервисный код:

export class ObserveLocalStorageService {
  private storageSub= new Subject<any>();

  watchStorage(): Observable<any> {
    return this.storageSub.asObservable();
  }

  setItem(key: string, data: any) {
    localStorage.setItem(key, data);
    this.storageSub.next('changed');
  }

  removeItem(key) {
    localStorage.removeItem(key);
    this.storageSub.next('changed');
  }
}

Код дочернего компонента:

export class FbLoginPopupComponent implements OnInit {

     uriObject: any;

     constructor(private storageService: ObserveLocalStorageService, 
                 private activatedRoute: ActivatedRoute) {}

     ngOnInit() {
       this.activatedRoute.fragment.subscribe((fragment: string) => {
         console.log('My hash fragment is here => ', fragment);

         this.uriObject = JSON.parse('{"' + decodeURI(fragment)
           .replace(/"/g, '\\"')
           .replace(/&/g, '","')
           .replace(/=/g,'":"') + '"}');


         if (this.uriObject['access_token']) {
           this.storageService.setItem('fb_tk', true);
           this.storageService.setItem('fb_tk_is', this.uriObject['access_token']);
         } else {
           this.storageService.setItem('fb_tk_err', this.uriObject['error']);
           this.storageService.setItem('fb_tk_err_desc', this.uriObject['error_description']);
         }
     }
}

Наконец, мой родительский компонент выглядит так:

export class FacebookLoginComponent implements OnInit, OnDestroy {

  private authWindow: Window;     

  constructor(private storageService: ObserveLocalStorageService) {}

  ngOnInit() {
     this.storageService.watchStorage().subscribe((data: string) => {
       console.log(data); <------------------ **problem is here. data is not loging**
     });

  launchFbLogin() {
    this.authWindow = window.open('https://www.facebook.com/v2.11/dialog/oauth?' +
      '&response_type=token' +
      '&display=popup' +
      '&client_id=123321123321123321123321' +
      '&display=popup' +
      '&redirect_uri=https://localhost:44312/auth/fb-login-popup' +
      // '&redirect_uri=https://localhost:44312/facebook-auth.html' +
      '&scope=email',null,'width=600,height=400');
  }

}

Я не могу найти решение. Пожалуйста, помогите.

Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...