javascript - 与在另一个窗口中打开的组件交互

Question

在我的项目中，我需要在 2 个不同的屏幕中显示 2 个不同的组件。所以我打开两个浏览器窗口并显示这些组件。 我想知道是否可以从第一个窗口中的组件与第二个窗口中的另一个组件进行交互？

我尝试在服务中创建一个 Subject。但是每当我尝试在另一个窗口的组件中订阅这个主题时，它就不起作用。这是我所做的:

export class MyService {
  public navigationTrigger: Subject<NavigationParams> = new Subject();

  constructor(private _http: Http) {
    this.navigationTrigger.next(params);
  }
}

在一个组件中我订阅了它:

this.watsonService.navigationTrigger.subscribe((navigation) => {
   this.updateNavigation(navigation);
});

但是不起作用。我不确定如何实现我的需要。

Answer 1

订阅一个 Subject 是行不通的，因为它只存在于那个单一窗口的范围内。

如果你想用它与两个不同的用户进行实时通信，那么你应该使用 WebSockets。 如果是同一用户，则可以使用 localStorage。

发送者部分

    localStorage.setItem("someKey", "someValue");

接收部分

    window.addEventListener('storage', storageEventHandler, false);

    function storageEventHandler(evt) {
        alert("storage event called key: " + evt.key);
    }

你也可以把它包装在 Observable 中，看这个例子

    Rx.Observable.create(observer => {
     window.addEventListener('storage', storageEventHandler, false);

     function storageEventHandler(evt) {
         alert("storage event called key: " + evt.key);
         observer.onNext(evt);
     }
     // todo: return unsubscribe function which will remove that eventListener

});