Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/9.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在angular 7中订阅本地存储_Angular_Typescript_Browser_Angular Local Storage - Fatal编程技术网

如何在angular 7中订阅本地存储

如何在angular 7中订阅本地存储,angular,typescript,browser,angular-local-storage,Angular,Typescript,Browser,Angular Local Storage,我想在父选项卡和子选项卡之间进行通信。我将在子选项卡(不同的组件,然后是父组件)中获取一些数据,然后将这些数据发送给父组件。 我认为使用浏览器本地存储是正确的方法。所以我要将数据插入localstorage,并希望父组件自动吸收此更改,从localstorage获取数据并关闭子窗口 我有两个用于父窗口和子窗口的组件,一个用于订阅本地存储的服务。问题是父组件并没有看到更改,因为我正在用子组件的“下一个”更改主题 服务代码为: export class ObserveLocalStorageServ

我想在父选项卡和子选项卡之间进行通信。我将在子选项卡(不同的组件,然后是父组件)中获取一些数据,然后将这些数据发送给父组件。 我认为使用浏览器本地存储是正确的方法。所以我要将数据插入localstorage,并希望父组件自动吸收此更改,从localstorage获取数据并关闭子窗口

我有两个用于父窗口和子窗口的组件,一个用于订阅本地存储的服务。问题是父组件并没有看到更改,因为我正在用子组件的“下一个”更改主题

服务代码为:

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 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');
  }

}
导出类FacebookLoginComponent实现OnInit、OnDestroy{
私有authWindow:窗口;
构造函数(私有存储服务:observelocstorageservice){}
恩戈尼尼特(){
this.storageService.watchStorage().subscribe((数据:字符串)=>{

console.log(数据);是否两个组件中使用的
storageService
不是同一个实例?是否可以尝试从
FacebookLoginComponent
中调用
storageService.setItem
,并检查
console.log()
是否为您运行?如果是这种情况,您可能需要检查这些组件是否属于同一模块。这可能会对您有所帮助。您是否找到了解决方案?
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');
  }

}