Question

在Angular 5中的项目中，当用户点击链接时，项目的新选项卡打开，然后新页面中的内容发生了变化。现在我如何在第一个标签中使用这些更改？我使用了Subject和Observable并保存了第一个组件的变量。代码进入第一个组件，但第一个选项卡不会更改，因为所有这些事件都在第二个选项卡中。我希望当我再次转到第一个选项卡时，完成与此组件相关的更改。我不知道怎么解决，如果你知道的话请帮忙。先谢谢你...

Answer 1

它不适用于在一个标签中触发并在另一个标签中捕获的主题，所以你可以简单地使用存储更改事件，如下所示：

window.addEventListener('storage', storageChanged);

// here listen to the changes
storageChanged(event) {
  // your code
}

在另一个标签中，当某些内容发生变化时，您可以将其添加到存储中，然后将其缓存在第一个事件监听器中

  localStorage.setItem('crossTabTest',data);

当与从服务器端获取的数据无关时，使用此方法，在这种情况下，您可能会使用Socket.io来接收更改。

---------------------- New Edit Section ----------------------

第一个组件

ngOnInit(): void {
    window.addEventListener('storage', () => {
      const a = JSON.parse(localStorage.getItem('crossTabTest'));
      localStorage.removeItem('crossTabTest');
      console.log('Changed Value = ', a);
    });
  }

第二个组件

localStorage.setItem('crossTabTest', JSON.stringify({continue: true}));

如何在另一个打开的选项卡中使用组件的更改？

1 个答案: