如何在Angular 5

时间:2018-03-19 14:06:05

标签: angular angular2-routing

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

1 个答案:

答案 0 :(得分:1)

您无法在两个浏览器标签或窗口之间共享变量,因为它们彼此隔离。如果你在两个标签中打开相同的应用程序,那么你有两个应用程序在运行,而且都没有意识到另一个。

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

使用postMessage,您可以向当前域中的所有选项卡发送消息,并从其接收消息。只要服务中的值发生变化,您就可以发送带有该值的postMessage。此外,在服务中,您必须侦听message事件,过滤它,如果某个窗口发送了值的更改,请将其设置为服务中的当前值。

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

您还可以将其与localStorage结合使用,以确保在打开新标签页时,它可以读取最新值。