如何在Angular 5中将服务数据从一个组件传递到另一个组件

Question

我正在使用服务将数据从一个组件传递到另一个组件。如果浏览器在同一选项卡中路由第二个组件，则服务数据是航空的，但是如果在浏览器服务数据的新选项卡中打开第二个组件页面不可用。 Angular和我正在学习。 请帮助我我所缺少的

Answer 1

您不能在两个浏览器选项卡或窗口之间共享变量，因为它们彼此隔离。 如果您在两个标签中打开同一个应用程序，则说明您有两个应用程序在运行，而另一个都不知道。

但是，可以使用postMessage API进行标签间通信。 您可以在此处阅读有关postMessage信息： https : //developer.mozilla.org/en-US/docs/Web/API/Window/postMessage 。

使用postMessage可以将消息发送到curren域中的所有选项卡，也可以从中接收消息。 每当服务中的值更改时，您都可以发送带有该值的postMessage 。 另外，在服务中，您必须侦听message事件，对其进行过滤，如果某个窗口发送了该值的更改，则将其设置为服务中的当前值。

执行此操作时，必须确保由于收到消息而在更新当前值时不要发送另一个postMessage ，否则您将进入无限循环（选项卡1发送消息，选项卡2接收消息，更改其值，广播该值，选项卡1接收消息，更新该值，广播相同的值，选项卡2接收消息...，依此类推。

您还可以将其与localStorage结合使用，以确保在打开新选项卡时，它可以读取最新值。