在 base window 和 popup window Angular 之间通信 12

Question

我需要在用户尝试再次打开同一个弹出窗口 window 时触发从基础 window 到弹出窗口 window 的一些事件，这是一个齿轮图标下拉菜单。我可以通过哪些不同的方式来处理这个用例？我尝试使用服务，但由于基础 window 和弹出窗口 window 是不同的 angular 应用程序，它创建了不同的服务实例。

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

解决方案：

如果您的两个应用程序部署在同一个域中，请使用浏览器存储（本地存储或其他）来存储信息。在本地存储中设置标志

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

从本地存储获取标志

window.localStorage.getItem("isPopOpen");

如果您的应用程序托管在不同的域上，请使用 Window.postMessage() 进行通信。 window.postMessage() 方法安全地启用 Window 对象之间的 cross-origin 通信；例如，在页面和它生成的 pop-up 之间，或者在页面和嵌入其中的 iframe 之间。

更多关于 window.postMessage() 的信息 https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

在 base window 和 popup window Angular 之间通信 12

Communicate between base window and popup window Angular 12

javascript

angular

popupwindow

angular12