在基本窗口和彈出窗口Angular 12之間進行通信

Question

當用戶嘗試再次打開相同的彈出窗口時，我需要從基本窗口觸發一些事件到彈出窗口，這是一個齒輪圖標下拉菜單。 我可以通過哪些不同的方式來處理這個用例？ 我嘗試使用服務，但由於基本窗口和彈出窗口是不同的角度應用程序，它正在創建不同的服務實例。

import { Injectable } from "@angular/core";
import { Subject } from "rxjs";

@Injectable()
export class ServiceMessage{
  subscribers: any = [];
  private subject = new Subject<any>();
  sub = this.subject.asObservable();
  a: any = [];
  constructor() {}

  nextSub(data: any) {
    this.subject.next(data)
  }
}

Answer 1

解決方案：

1. 如果您的兩個應用程序部署在同一個域中，請使用瀏覽器存儲（本地存儲或其他）來存儲信息。 在本地存儲中設置標志

window.localStorage.setItem("isPopOpen", "true");

從本地存儲中獲取標志

window.localStorage.getItem("isPopOpen");

2. 如果您的應用程序托管在不同的域上，請使用Window.postMessage()進行通信。 window.postMessage()方法可以安全地啟用 Window 對象之間的跨域通信； 例如，在頁面和它生成的彈出窗口之間，或者在頁面和嵌入其中的 iframe 之間。

更多關於window.postMessage()的信息在這里https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage