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

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

订阅主题将不起作用，因为它仅存在于该单个窗口的范围内。

如果您想使用它与两个不同的用户进行实时通信，那么您应该使用 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

});