Question

我有一个组件ClassFoo myMember，它需要服务mainComponent来http请求一些数据更新BehaviorSubject myService。请求完成后，将打开一个新窗口，其中包含组件data，其中将显示来自otherComponent的一些信息。

但是，myService.data不会收到来自otherComponent的最新值-它会收到最初设置为data的任何内容。

mainComponent.ts

data

myService.ts

open() {
    this.myObs = this.myService
    .fetchObservable()
    .subscribe(() => {
        this.myService.data.subscribe(value => {
            console.log(value) //logs "new data"                
        });
        this.nativeWindow.open('workflow-editor'); //occurs after data has been updated
    })

otherComponent.ts

public data: BehaviorSubject<string> = new BehaviorSubject<string>("old data");
    fetchObservable(){
        return this.http.get('./url')
        .pipe(
            map(res => {
                this.data.next("new data");
                console.log(this.data.value) //console.logs "new data"
                return res;
            })
        )
    }

仅当我在新窗口中加载ngOnInit(){ this.myService.data.subscribe(value => { console.log(value) //console.logs "old data" });时，才会出现此问题。当我在同一窗口中加载组件时，它会正确记录otherComponent。我怀疑这是因为一个新窗口加载了该应用程序的新版本，从而创建了"new data"的新实例-尚未更新其myService值的实例。

有什么办法解决吗？我可以在两个窗口中使用服务的同一实例吗？

Answer 1

听起来像localStorage的工作

编写一个可以更新本地存储并获取值的服务。与以下代码段相似。

import { Injectable } from '@angular/core';

@Injectable()
export class LocalStorageService {

  constructor() { }

  setLocalStorage(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  }

  getLocalStorage(key) {
    return JSON.parse(localStorage.getItem(key));
  };
}

使用此数据将在两个窗口之间可用。如您所说，当打开新窗口时将创建一个新的angular应用程序实例，以便重置服务数据，因此您可以使用localStorage解决数据丢失的问题。下面是一个有效的示例！

Stack Blitz Demo

参考：Storing data across windows

如何在不同窗口中的组件之间使用角度服务的相同实例？

1 个答案: