使用Angular 2可以在一个应用程序的两个选项卡之间进行交互?

时间:2017-09-29 11:38:50

标签: angular service

可能出现以下情况吗?

假设我们有一个应用程序,我在浏览器的2个不同选项卡中打开应用程序的2个不同部分。现在是否可以将某个应用程序的某个部分置于某种“侦听模式”中,这样​​当我在应用程序的某个部分进行更改时,它会立即实现其他部分的更改,并且选项卡会自动刷新并显示更改当你在一个标签中只在应用程序的一个部分中完成所有内容时会发生什么?

PS:我指的是Angular 2框架。

3 个答案:

答案 0 :(得分:0)

只需使用普通的JavaScript即可。对此有storage event,事件跟踪存储中的更改。提供这样的服务

$(window).on('storage', storageChanged);
function storageChanged(){
    //all your tabs will listen this event    
}

答案 1 :(得分:0)

如果您正在讨论两个单独的浏览器标签,我不这么认为。但是,我可以想到一种可以监听存储更改的方法。在这种情况下,其中一个选项卡正在更改存储项目,另一个选项卡正在侦听同一项目并应用它们:

$(window).on('storage', storage_changed);

function storage_changed(event)
{
  if (ev.originalEvent.key != 'youritemname') return; // ignore other changes
  var message = JSON.parse(ev.originalEvent.newValue);
  if (!message) return; 

  //apply the changes to the second tab

}

如果您的标签没有使用相同的代码,则需要将代码添加到两者中,否则就足够了。

现在,当名称为youritemname的项目发生更改时,将触发一个事件,两个标签都可以监听此事件并对其进行操作。

好消息是你甚至不需要阅读存储空间。

答案 2 :(得分:0)

我担心的不是因为每个标签都会打开一个全新的Angular实例而且它不会被共享。