如何在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結合使用，以確保在打開新選項卡時，它可以讀取最新值。