让 BehaviorSubject 在浏览器选项卡中持续存在？（@HostListener？）答案

【问题标题】：Make BehaviorSubject persist across browser tabs? (@HostListener?)让 BehaviorSubject 在浏览器选项卡中持续存在？（@HostListener？）
【发布时间】：2019-11-03 16:29:05
【问题描述】：

我们有一个Angular 6 应用程序，由类似 Excel 的网格组成。当用户更新一个网格时，myFunction() 运行，并且从另一个组件我们需要能够判断 myFunction() 是否仍在进行中。

我找到了使用RXJS BehaviorSubject 的解决方案。然后我意识到这个解决方案不会在浏览器选项卡中持续存在（因为每个选项卡都是它自己的 Angular 实例）。这是一个问题，因为用户可能在一台显示器上打开一个网格，在另一个显示器上打开另一个网格。

所以我找到了这个@HostListener 解决方案https://stackoverflow.com/a/45638992/6647188，但我不知道如何将我的BehaviorSubject 逻辑转换为这个策略。除了@HostListener之外，也许还有保存和订阅localStorage的替代方法，所以我不必使用事件？否则，我可以尝试将@HostListener 与我自己的自定义手动发出的事件一起使用，尽管我也不知道该怎么做。我的代码：

组件 1 (US Dollars grid)：

myFunction() {
     self.myService.isFunctionStillRunningBehaviorSubject.next(true);
     this.get(path).subscribe (
         data = > {  
           self.myService.isFunctionStillRunningBehaviorSubject.next(false); 
         }
     );
}

组件 2 (Euros grid)：

public subscription;

ngOnInit() {
    this.myService.isFunctionStillRunningObservable.subscribe(
        data => {
            if (data === true) {
                console.log("myFunction() is still running!");
            }
        }
    );
}

我的服务：

import { Observable, BehaviorSubject } from 'rxjs';

public isFunctionStillRunningBehaviorSubject = new BehaviorSubject<boolean>(null);

public isFunctionStillRunningObservable = this.isFunctionStillRunningBehaviorSubject.asObservable();

即使使用 localStorage，如果该功能是由其他人在另一台机器上启动的，我仍然无法判断该功能是否正在进行 - 但对于每个用户而言，localStorage 可能就足够了。

【问题讨论】：

当您说“标签”时，您是指浏览器标签吗？或者您的 Angular 应用程序中的选项卡类似于 MaterialTabs，例如 - material.angular.io/components/tabs/overview。如果是浏览器标签，请更新您的问题以避免混淆。
浏览器标签，谢谢 :)
这篇文章有一些关于将浏览器标签与 NgRx 存储同步的想法：blog.angularindepth.com/…。但是这里有一些困难的问题，例如。如果用户在this.get(path) 正在进行时关闭浏览器选项卡会发生什么。

标签： angular events rxjs local-storage behaviorsubject

【解决方案1】：

如果您需要在两个不同的浏览器（两个不同的人）之间进行通信，您可能需要考虑使用某种类型的 Socket 通信。对于 Node，它将类似于 SocketIO.. 如果您的后端使用 C#，则可能是 SignalR。

【讨论】：