能否在其他浏览器选项卡中使用rxjs angular 5订阅observable？

Question

我有一个Angular应用程序，有两个页面，我在浏览器的每个选项卡中打开它们，如果我在页面1中执行某些方法，我希望页面2使用rxjs订阅数据更改并更新数据，就像实时应用程序一样，是否有不使用WebSocket可以实现这一点的方法？我已经尝试使用subscribe方法，但只有页面1监听该订阅。

这是页面1调用刷新方法来更新布尔值

this.service.doRefresh();

第二页听

this.service.$refresh.subscribe(x=>{//boolean value changed by page 1(tab1)
    if(x) {
        console.log(x);
        this.service.stopRefresh();
    }
});

- Mamen

---

每个选项卡都有其自己的应用程序实例。 - JEY

那么，我可以做什么来简单地刷新数据而不使用 WebSocket？ - Mamen

一种方法是从tab1更新Firebase实时数据库，然后tab2将自动推到更新。 - siva636

可以在不需要请求后端的情况下使用的一种方法是使用广播通道（BroadcastChannel）。 - JEY

这里有一个名为 rx-postmessenger 的项目。 - Richard Matsen

Answer 1

实际上，您可以向localStorage添加事件侦听器，以便您可以使用localStorage在选项卡之间“传递消息”

localStorage.setItem('yourKeyName', true)

window.addEventListener('storage', (event) => {
   if (event.key == 'yourKeyName'){
      //update data
   }
});

所以，当您在一个页面上更改localStorage中某个内容的值时，另一个页面可以订阅该内容变化的事件。

浏览器支持和更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage#Browser_compatibility

- YourGoodFriend

---

好的，我会尝试并在尝试以上代码后向你们发送更新。 - Mamen

@Mamen，你有机会试试吗？如果你对它还有更多的问题，请告诉我。 - YourGoodFriend

是的，你说得对，我们可以使用本地存储进行订阅，这是我在项目中使用的npm包ngx-webstorage，它可以帮助大家更容易地理解。谢谢。 - Mamen

非常好的简单解决方案！谢谢！ - Bludwarf